vuecli4升级到vuecli5踩坑记录

项目依赖的module版本很新，用到了es2020的语法，在vuecli4版本上死活编译不成功，升级5后解决，这个过程中在配置vue.config.js中遇到了很多问题，记录下给大家一个参考~

vuecli官网英文已经更新为最新的cli5但中文还停留在cli4，导致我最开始在查资料时一直没有查到官方资料，后来偶然间切换英文才发现。

1.配置scss，pretendData变为additionalData 

2.启用css moudles

这个vuecli官网也有记录Working with CSS | Vue CLI

值得注意的是，在vuecli4中使用requireModuleExtension，默认为true，默认情况下，只有 *.module.[ext] 结尾的文件才会被视作 CSS Modules 模块。详见配置参考 | Vue CLI

而在vuecli5中，如果将所有样式文件视为 CSS 模块，才需要设置

 这里其实跟cli4中赋值是相反的，在cli4版本中requireModuleRxtension为true表示只有以.module结尾的才被当做css Modules模块，而在cli5版本中，为true时是将所有样式文件都当做了css Moudles模块。

就是在这里开始我配置错了，导致项目样式加载不出来，找了很久的原因。后来发现在页面上样式id并不是我文件中写的id才发现这个问题。

3.hotOnly

devServer配置中的hotOnly为true改为hot:’only’，若为false可以省略该属性

4.configureWebpack中的fileName

使用compression-webpack-plugin9版本，在配置plugin的fileName时，在compression-webpack-plugin5版本中，配置fileName为”[path].gzip[query]”，升级到9.0+版本后，改为”[path][base].gzip”

5.完整的vue.config.js

最后，贴出完整的vue.config.js供大家参考

const { defineConfig } = require("@vue/cli-service") const path = require("path") const CompressionWebpackPlugin = require("compression-webpack-plugin") const productionGzipExtensions = ["js", "css"] const resolve = (dir) => path.join(__dirname, dir) module.exports = defineConfig({ // 基本路径 publicPath: "/", // 输出文件目录 outputDir: "", assetsDir: "static", // eslint-loader 是否在保存的时候检查 lintOnSave: false, runtimeCompiler: true, // 关键点在这 filenameHashing: true, // 调整内部的 webpack 配置。 chainWebpack: (config) => { config.resolve.alias .set("@", resolve("src")) .set("assets", resolve("src/assets")) .set("components", resolve("src/components")) .set("types", resolve("src/types")) .set("public", resolve("public")) config.module .rule("vue") .use("vue-loader") .tap((options) => ({ ...options, compilerOptions: { // 忽略自定义标签警告 vue3 app.config.compilerOptions.isCustomElement 配置有问题 isCustomElement: (tag) => { return ["xml", "block", "mutation", "category"].includes(tag) }, }, })) }, // 生产环境是否生成 sourceMap 文件 productionSourceMap: false, // css相关配置 css: { // 开启 CSS source maps? sourceMap: false, // css预设器配置项 loaderOptions: { scss: { additionalData: `@import './src/assets/styles/variables.scss';`, }, sass: { implementation: require("sass"), // This line must in sass option }, css: { modules: { auto: () => false, }, }, }, }, // webpack-dev-server 相关配置 devServer: { /* 自动打开浏览器 */ open: process.platform === "darwin", port: 8080, https: false, // hot: 'only', /* 使用代理 */ proxy: { "/robogo": { /* 目标代理服务器地址 */ target: process.env.VUE_APP_BASE_API, /* 允许跨域 */ changeOrigin: true, ws: true, }, "/loki": { /* 目标代理服务器地址 */ target: process.env.VUE_APP_BASE_API, /* 允许跨域 */ changeOrigin: true, ws: true, }, }, }, configureWebpack: { resolve: { fallback: { path: require.resolve("path-browserify"), stream: require.resolve("readable-stream"), crypto: require.resolve("crypto-browserify"), perf_hooks: false, module: false, "@blueprintjs/core": false, "@blueprintjs/icons": false, domain: false, fs: false, pnpapi: false, punycode: false, }, }, module: { rules: [ { test: /\.mjs$/, include: /node_modules/, type: "javascript/auto", }, ], }, plugins: [ new CompressionWebpackPlugin({ filename: "[path][base].gzip", algorithm: "gzip", test: new RegExp("\\.(" + productionGzipExtensions.join("|") + ")$"), threshold: 10240, //内容超过10KB进行压缩 minRatio: 0.8, }), ], externals: [ { "./cptable": "var cptable", }, ], }, // 第三方插件配置 pluginOptions: {}, })