由于使用组件库大部分情况下跟自己的项目主题风格不一致, 所以需要更改 element 主题, 如果都用 deep 深度选择器会消耗大量时间精力, 看着一堆堆的 deep 是在让人头大, 并且有些组件的样式难以修改, elementUi提供了修改主题功能, 因此可以从容的摸鱼拉

首先在官网进行主题定制, 并下载

项目中使用了scss 可以采用变量覆盖

创建一个scss文件这里以 element-variables.scss 为例
官网下载的文件解压之后得到一个config.json文件

3 把需要覆盖掉的变量复制到创建的 element-variables.scss 文件中(注意JSON文件是带引号的, 需要把引号去掉), 并把element包里的样式文件导入到这个scss文件中

在入口文件中引入创建的 element-variables.scss 文件 (这里不用再引入element的样式文件了)

缺点: 该方式会造成样式文件有点大 200多kb 可配合 Gzip 压缩

通用方案

官网下载文件中有一个 theme 文件复制到项目的src下
在入口中直接引入 theme 文件中的 index.css 即可

缺点: 同样是样式文件过大并且比第一种方式还要大一点

webpack 优化

gzip 压缩

下载依赖 npm i --save-dev compression-webpack-plugin
在 vue.config.js 中增加配置

// 引入依赖
const CompressionWebpackPlugin = require('compression-webpack-plugin');
// 判断环境
const isProduction = process.env.NODE_ENV === 'production';

module.exports = defineConfig({
...,
 configureWebpack: config => {
 
      if (isProduction) {
          config.plugins.push(new CompressionWebpackPlugin({
            algorithm: 'gzip',
            test: /\.js$|\.html$|\.json$|\.css/,
            threshold: 10240,
            minRatio: 0.8
          }))
      }
       ...,
 }
 
})

打包之后会看到.gz 结尾文件

开启js文件分离

在 vue.config.js 中增加配置

module.exports = defineConfig({
...,
 configureWebpack: config => {
 
      if (isProduction) {
             config.optimization = {
                runtimeChunk: 'single',
                splitChunks: {
                  chunks: 'all',
                  maxInitialRequests: Infinity,
                  minSize: 20000,
                  cacheGroups: {
                    vendor: {
                      test: /[\\/]node_modules[\\/]/,
                      name (module) {
                        // get the name. E.g. node_modules/packageName/not/this/part.js
                        // or node_modules/packageName
                        const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
                        // npm package names are URL-safe, but some servers don't like @ symbols
                        return `npm.${packageName.replace('@', '')}`
                      }
                    }
                  }
                }
              }
        
      }
       ...,
 }
 
})

打包完成可以看到超过规定大小的文件被拆分成很多js文件

element-ui 更改主题