最近突然想重新完整地搭建一个 vue3 项目的框架，方便后续的开发，然而刚起步就踩坑了，特此记录下。

这里使用的是官方的脚手架搭建的项目

vue create vue3-demo

项目搭建好了，想着由于移动端开发的比较多，所以想引入 postcss-pxtorem 插件方便后续开发，所以安装 postcss-pxtorem

npm install postcss-pxtorem -D

于是第一个报错出现了

npm ERR! While resolving: @vue/eslint-config-standard@6.1.0

npm ERR! Found: eslint-plugin-vue@8.7.1

npm ERR! node_modules/eslint-plugin-vue

npm ERR! peer eslint-plugin-vue@"^8.0.1" from @vue/eslint-config-typescript@9.1.0

大概意思是 eslint-plugin-vue 版本与 @vue/eslint-config-standard 版本不匹配导致的，于是降低 eslint-plugin-vue 版本到 7

npm install eslint-plugin-vue@7 -D

接下来继续安装 postcss-pxtorem 插件，然而第二个错误又出现了

npm ERR! While resolving: @vue/eslint-config-typescript@9.1.0

npm ERR! Found: eslint-plugin-vue@7.20.0

npm ERR! node_modules/eslint-plugin-vue

npm ERR! peer eslint-plugin-vue@"^7.0.0" from @vue/eslint-config-standard@6.1.0

原因是 @vue/eslint-config-typescript 版本太高，于是降低 @vue/eslint-config-typescript 版本到 8

npm install @vue/eslint-config-typescript@8 -D

安装完后，继续安装 postcss-pxtorem 插件，这次终于成功了。
接下来在 vue.config.js 配置文件中配置 postcss-pxtorem 配置，eslint 出现了一个警告，Require statement not part of import statement（@typescript-eslint/no-var-requires）

解决办法，在.eslintrc.js 中的 rules 属性增加如下配置

rules: {
    '@typescript-eslint/no-var-requires': 0
}

重新执行 npm run lint，至此，警告消失。

接下来安装 autoprefixer，自动添加浏览器前缀，以便刚好的兼容设备。安装并配置完后，重启项目发现能正常运行，px 单位也会自动转换成 rem 单位，好了，开始安装打包优化相关的插件 compression-webpack-plugin、terser-webpack-plugin、css-minimizer-webpack-plugin

npm install compression-webpack-plugin terser-webpack-plugin css-minimizer-webpack-plugin -D

在 vue.config.js 中增加如下配置:

const CompressionWebpackPlugin = require('compression-webpack-plugin')
const TerserPlugin = require('terser-webpack-plugin')
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')

configureWebpack: {
  plugins: [
    new CompressionWebpackPlugin({
      algorithm: 'gzip',
      test: new RegExp('\\.(' + ['js', 'css'].join('|') + ')$'),
      threshold: 10240,
      minRatio: 0.8
    }),
    new TerserPlugin({
      parallel: true,
      terserOptions: {
        compress: {
          drop_console: true
        }
      }
    }),
    new CssMinimizerPlugin({
      parallel: true,
      minimizerOptions: {
        sourceMap: false
      }
    })
  ]
}

此时，完整配置如下：

const { defineConfig } = require('@vue/cli-service')
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const TerserPlugin = require('terser-webpack-plugin')
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')

module.exports = defineConfig({
  transpileDependencies: true,
  css: {
    loaderOptions: {
      less: {
        lessOptions: {
          javascriptEnabled: true
        }
      },
      postcss: {
        postcssOptions: {
          plugins: [
            require('postcss-pxtorem')({
              rootValue: 16,
              unitPrecision: 5,
              replace: true,
              propList: ['*'],
              selectorBlackList: ['.ignore-'],
              exclude: /node_modules/i,
              mediaQuery: false,
              minPixelValue: 2
            }),
            require('autoprefixer')({
              overrideBrowserslist: [
                'Android 4.1',
                'iOS 7.1',
                'Chrome > 31',
                'ff > 31',
                'ie >= 8',
                'last 50 versions'
              ],
              grid: true // 是否使用 autoprefixer
            })
          ]
        }
      }
    }
  },
  configureWebpack: {
    plugins: [
      new CompressionWebpackPlugin({
        algorithm: 'gzip',
        test: new RegExp('\\.(' + ['js', 'css'].join('|') + ')$'),
        threshold: 10240,
        minRatio: 0.8
      }),
      new TerserPlugin({
        parallel: true,
        terserOptions: {
          compress: {
            drop_console: true
          }
        }
      }),
      new CssMinimizerPlugin({
        parallel: true,
        minimizerOptions: {
          sourceMap: false
        }
      })
    ]
  },
  productionSourceMap: false
})

至此，一个基于 vue3 的基础框架搭建好了