李维亮_前端开发攻城狮 - 2022年11月
type: channel
link: https://www.liweiliang.com/2022/11/
description: 行胜于言，自强不息！纸上得来终觉浅，绝知此事要躬行！
items: pc端屏幕显示设置缩放比例对页面布局的适配
items: vue国际化配置
items: vue 项目启动报错：Syntax Error: Unexpected token 的解决方法

pc端屏幕显示设置缩放比例对页面布局的适配
type: item
date: 2022-11-30T13:49:00+08:00
description: 利用device-pixel-ratio单独适配像素比@media all and (-moz-min-device-pixel-ratio: 1.09) and (-moz-max-device-pixel-ratio: 1.18), (-webkit-min-device-pixel-ratio: 1.09) and (-webkit-max-device-pixel-ratio: 1.18), (min-resolution: 1.09dppx) and (max-resolution: 1.18dppx) { :root { font-size: 14px; } } @media all and (-moz-min-device-pixel-ratio: 1.19) and (-moz-max-device-pixel-ratio: 1.28), (-webkit-min-device-pixel-ratio: 1.19) and (-webkit-max-device-pixel-ratio: 1.28), (min-resolution: 1.19dppx) and (max-resolution: 1.28dppx) { :root { font-size: 13px; } } @media all and (-moz-min-device-pixel-ratio: 1.29) and (-moz-max-device-pixel-ratio: 1.4), (-webkit-min-device-pixel-ratio: 1.29) and (-webkit-max-device-pixel-ratio: 1.4), (min-resolution: 1.29dppx) and (max-resolution: 1.4dppx) { :root { font-size: 12px; } } @media all and (-moz-min-device-pixel-ratio: 1.41) and (-moz-max-device-pixel-ratio: 1.6), (-webkit-min-device-pixel-ratio: 1.41) and (-webkit-max-device-pixel-ratio: 1.6), (min-resolution: 1.41dppx) and (max-resolution: 1.6dppx) { :root { font-size: 10px; } } @media all and (-moz-min-device-pixel-ratio: 1.61) and (-moz-max-device-pixel-ratio: 1.8), (-webkit-min-device-pixel-ratio: 1.61) and (-webkit-max-device-pixel-ratio: 1.8), (min-resolution: 1.61dppx) and (max-resolution: 1.8dppx) { :root { font-size: 9px; } } @media all and (-moz-min-device-pixel-ratio: 1.81) and (-moz-max-device-pixel-ratio: 2.1), (-webkit-min-device-pixel-ratio: 1.81) and (-webkit-max-device-pixel-ratio: 2.1), (min-resolution: 1.81dppx) and (max-resolution: 2.1dppx) { :root { font-size: 8px; } } vue解决办法mounted () { this.handleScreen() window.onresize = () => { this.handleScreen() } }, methods: { handleScreen(){ const zoom = this.detectZoom(); console.log(zoom, 'MMMMMMMMMMMMMMM') const scale = 100 / Number(zoom); console.log('scale', scale, typeof scale) }, detectZoom () { let ratio = 0, screen = window.screen, ua = navigator.userAgent.toLowerCase(); if (window.devicePixelRatio !== undefined)…

vue国际化配置
type: item
date: 2022-11-07T16:31:55+08:00
description: 首先安装vue-i18n包新建locales/i18n.js文件/** * Created by liweiliang 406320591@QQ.com on 2022/10/14 15:16. */ import Vue from "vue"; import VueI18n from "vue-i18n"; import elementZhLocale from "element-ui/lib/locale/lang/zh-CN"; // element-ui lang import elementEnLocale from "element-ui/lib/locale/lang/en"; // element-ui lang import enLocale from "./lang/enLocale"; import zhLocale from "./lang/zhLocale"; const messages = { en: { ...enLocale, ...elementEnLocale, }, zh: { ...zhLocale, ...elementZhLocale, }, }; /** * i18n 配置 * @param locale 本地化语言 * @param fallback 回退语言 * @returns {VueI18n} */ function initI18n(locale, fallback) { Vue.use(VueI18n); let i18nOptions = { locale, fallbackLocale: fallback, silentFallbackWarn: true, messages, }; return new VueI18n(i18nOptions); } export { initI18n }; locales/lang/zhLocale.js文件/** * Created by liweiliang 406320591@QQ.com on 2022/10/17 14:11. */ const zhModulesFiles = require.context("./zh", true, /\.js$/); const zhLang = zhModulesFiles.keys().reduce((modules, modulePath) => { const value = zhModulesFiles(modulePath); modules = { ...modules, ...value.default }; return modules; }, {}); export default zhLang; locales/lang/enLocale.js文件main.js引入import { initI18n } from "@/locales/i18n"; const i18n = initI18n(Cookies.get('language') || 'en', "en"); new Vue({ el: '#app', router, store, i18n, render: h => h(App) })

vue 项目启动报错：Syntax Error: Unexpected token 的解决方法
type: item
date: 2022-11-02T11:09:19+08:00
description: vue项目根目录新增配置文件 .babelrc{ "presets": [ "stage-2" ] } 修复好 Syntax Error: Unexpected token 启动发现又报如下问题Failed to compile with 9 errors Module build failed: Error: No PostCSS Config found in: D:\project\ 根目录新建postcss.config.js/** * Created by liweiliang 406320591@QQ.com on 2022/11/1 14:10. */ module.exports = { plugins: { autoprefixer: {browsers: 'last 5 version'} } }