# myModuleVue2 **Repository Path**: simalian/my-module-vue2 ## Basic Information - **Project Name**: myModuleVue2 - **Description**: 使用vue2,包含mock.js模拟数据,切换主题功能,中英文切换功能 - **Primary Language**: Unknown - **License**: MulanPSL-2.0 - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 1 - **Forks**: 1 - **Created**: 2022-07-26 - **Last Updated**: 2025-02-08 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # Node版本 > v14.10.1 # 初始化代码 ``` npm i 或 npm install ``` # 运行 ``` npm run serve ``` # 编译打包 ``` npm run build ``` # 相关插件 > 预编译scss,内置了一些样式,可在src/style/readme.md查看 > sass-loader v7.1.0 > node-sass v4.14.1 ``` npm i sass-loader node-sass ``` > 生产环境下移出 console ``` npm i babel-plugin-transform-remove-console ``` > 引入 elementUI ``` npm i element-ui -S 按需引入需要 插件 npm install babel-plugin-component -D ``` > 使用 postcss-pxtorem 页面适配,配置文件 postcss.config.js ``` amfe-flexible是配置可伸缩布局方案,主要是将1rem设为viewWidth/10。 postcss-pxtorem是postcss的插件,用于将像素单元生成rem单位。 ``` > 移出没有使用的css样式:purgecss-webpack-plugin、glob-all > 使用了CDN加速 > mock.js模拟数据 > 动态生成路由,可自定配置 > 换肤功能 - 关键代码 > indes.scss ``` :root { --primary-color: red } ``` - 在对应的事件下执行 ``` document.documentElement.style.setProperty('--primary-color','green') ``` > vue-i18n@6 多语言切换 ------------------------------------------------------- # 可能出现的问题 ### 打包出现兼容 Building legacy bundle for production... 问题 package.json "browserslist": [ "> 1%", "last 2 versions", "not dead" ] ===> "browserslist": [ "> 1%", "last 2 versions", "not dead", "not ie 11" ] # 切换主题的操作 ### 相关插件 > npm install ---save webpack-theme-color-replacer - 在vue.config.js配置 ``` // 引入插件 const ThemeColorReplacer = require('webpack-theme-color-replacer') const forElementUI = require('webpack-theme-color-replacer/forElementUI') // 使用插件 chainWebpack: (config) => { cconfig.plugin('webpack-theme-color-replacer') .use(ThemeColorReplacer) .tap(options => { const matchColors = [...forElementUI.getElementUISeries('#409EFF')] options[0] = { fileName: 'css/theme-colors-[contenthash:8].css', // 输出css文件名 matchColors: matchColors, // 用于提取 css 文件的颜色数组。将提取出具有这些颜色中的任何一种的 CSS 规则。 changeSelector: forElementUI.changeSelector, // 更改 css 选择器,以提高 css 优先级,以解决延迟加载问题 // isJsUgly: process.env.NODE_ENV !== 'development' // 代码压缩 isJsUgly:true } return options }); }) ``` - 配置方法 ``` import client from 'webpack-theme-color-replacer/client' import forElementUI from 'webpack-theme-color-replacer/forElementUI' export function setThemColor(newColors){ const { getElementUISeries } = forElementUI return client.changer.changeColor({ newColors:getElementUISeries(newColors) }, Promise).then(() => { console.log("ok"); }) } ``` - 使用setThemColor方法 ``` import {setThemColor} from '@/themeConfig/index.js export default { methods:{ clickItem(){ setThemColor('#ccc') }, }, } ``` # 在vue.config.js 全局引入 scss 变量出现的bug > Syntax Error: HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js): ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema. 原因: sass-load、sass 版本太高 # webpack-theme-color-replacer动态切换主题色,打包时该功能失效,css没有提取 > 原因: css配置 extract应该为true ------------------------------------------------------------------------------------ # 补充说明 打包后可以打开 report.html 文件,查看分析包的大小 正式环境中应该删除该文件