【升级Cli5】记一次vue2由cli4升级到cli5的实际操作

主要修改点是 package.json 和 vue.config.js，所以这里直接罗列代码：

package.json

// cli4
{"name": "","version": "1.1.1","private": true,"scripts": {"serve": "vue-cli-service serve --mode local","preview": "vue-cli-service serve --mode production","build": "vue-cli-service build --mode production","dev-build": "vue-cli-service build --mode development","lint": "vue-cli-service lint","analyzer": "vue-cli-service build --mode production --report"},"dependencies": {"@chenfengyuan/vue-barcode": "^1.0.1","@microsoft/clarity": "^1.0.0","axios": "0.27.2","echarts": "^5.3.3","js-cookie": "^2.2.1","lodash": "^4.17.21","pdfjs-dist": "2.5.207","print-js": "^1.6.0","qrcodejs2": "0.0.2","view-design": "4.6.0","vue": "2.7.14","vue-clipboard2": "^0.3.1","vue-jsonp": "^0.1.8","vue-pdf": "4.2.0","vue-router": "3.6.5","vue_qrcodes": "^1.1.3","vuex": "^3.0.1","wangeditor": "^3.1.1"},"devDependencies": {"@vue/cli-plugin-babel": "^4.0.0","@vue/cli-plugin-eslint": "^4.0.0","@vue/cli-plugin-router": "~5.0.0","@vue/cli-service": "^4.0.0","@vue/eslint-config-standard": "^4.0.0","babel-eslint": "^10.0.1","compression-webpack-plugin": "^2.0.0","core-js": "^3.22.5","eslint": "^5.8.0","eslint-plugin-vue": "^5.0.0","postcss-px2rem": "^0.3.0","qs": "^6.7.0","sass": "1.36.0","sass-loader": "7.3.1","uglifyjs-webpack-plugin": "^2.1.2","vue-template-compiler": "^2.5.21"}
}

// cli5
{"name": "rrsjk-merchant-h5","version": "1.2.0","private": true,"scripts": {"serve": "vue-cli-service serve --mode local","preview": "vue-cli-service serve --mode production","build": "vue-cli-service build --mode production","dev-build": "vue-cli-service build --mode development","lint": "vue-cli-service lint","analyzer": "vue-cli-service build --mode production --report"},"dependencies": {"@chenfengyuan/vue-barcode": "^1.0.1","@microsoft/clarity": "^1.0.0","axios": "0.27.2","echarts": "^5.3.3","js-cookie": "^2.2.1","lodash": "^4.17.21","pdfjs-dist": "^2.12.313","print-js": "^1.6.0","qrcodejs2": "0.0.2","terser-webpack-plugin": "^5.3.14","view-design": "4.6.0","vue": "2.7.14","vue-clipboard2": "^0.3.1","vue-jsonp": "^0.1.8","vue-pdf": "^4.3.0","vue-router": "3.6.5","vue_qrcodes": "^1.1.3","vuex": "^3.6.2","wangeditor": "^3.1.1"},"devDependencies": {"@vue/cli-plugin-babel": "~5.0.0","@vue/cli-plugin-eslint": "~5.0.0","@vue/cli-plugin-router": "~5.0.0","@vue/cli-service": "~5.0.0","@vue/eslint-config-standard": "^6.1.0","@babel/core": "^7.22.0","@babel/eslint-parser": "^7.19.1","babel-plugin-import": "^1.13.6","compression-webpack-plugin": "^9.2.0","core-js": "^3.25.0","eslint": "^8.40.0","eslint-plugin-import": "^2.27.0","eslint-plugin-node": "^11.1.0","eslint-plugin-promise": "^6.1.0","eslint-plugin-vue": "^8.7.1","postcss": "^8.4.0","postcss-px2rem": "^0.3.0","qs": "^6.11.0","sass": "1.55.0","sass-loader": "13.2.0","vue-template-compiler": "^2.7.14","webpack": "^5.82.0"}
}

vue.config.js

const Timestamp = new Date().getTime();
const CompressionWebpackPlugin = require("compression-webpack-plugin");
const TerserPlugin = require('terser-webpack-plugin');
const isProduction = process.env.NODE_ENV === "production";
const isDev = process.env.NODE_ENV === "development";
// cdn预加载使用
const externals = {vue: "Vue",vuex: "Vuex",axios: "axios","vue-router": "VueRouter",
};
const cdn = {// 生产环境build: {css: [],js: ["//cdn.staticfile.net/vue/2.7.14/vue.min.js","//cdn.staticfile.net/vuex/3.0.1/vuex.min.js","//cdn.staticfile.net/axios/1.6.0/axios.min.js","//cdn.staticfile.net/vue-router/3.6.5/vue-router.min.js",]}
};module.exports = {// 放在子目录时使用./或者加你的域名// publicPath: process.env.BASE_URL,publicPath: "/mch",filenameHashing: true,configureWebpack: config => {// * 文件压缩const CompressionConfig = new CompressionWebpackPlugin({filename: '[path].gz[query]',algorithm: 'gzip',test: /\.(js|css|html|json|xml|svg|txt|md|ico)(\?.*)?$/i,threshold: 10240,minRatio: 0.8,deleteOriginalAssets: false, // 保留原始文件})const TerserPluginConfig = new TerserPlugin({parallel: true,terserOptions: {compress: {drop_console: true, // 移除 consoledrop_debugger: true, // 移除 debuggerpure_funcs: ['console.log'] // 移除 console.log},mangle: {toplevel: true // 顶层变量重命名},output: {comments: false // 删除所有注释}}})// 定义通用的配置更改，包括输出文件名const commonConfig = {output: {// 使用时间戳作为文件名的一部分filename: `js/[name].[hash].bundle.js`,chunkFilename: `js/[name].[chunkhash].chunk.js`},optimization: {splitChunks: {chunks: 'all',cacheGroups: {vendor: {name: 'chunk-vendors',test: /[\\/]node_modules[\\/]/,priority: 10,chunks: 'initial'},lodash: {name: 'ed42d6dedd435e6f',test: /[\\/]node_modules[\\/](lodash)[\\/]/,priority: 20},viewui: {name: '215543f1ffd2f793',test: /[\\/]node_modules[\\/](view-design)[\\/]/,priority: 20}}},minimizer: []},plugins: [CompressionConfig]};// 如果是生产环境，添加额外的配置if (isProduction || isDev) {// * 构建文件大小的性能提示commonConfig.performance = {hints: false};commonConfig.optimization.minimizer.push(TerserPluginConfig)} else {// 本地开发环境需要的插件// * commonConfig.plugins.push(new BundleAnalyzerPlugin());}return commonConfig;},chainWebpack: config => {// 设置目录别名aliasconfig.resolve.alias.set("assets", "@/assets").set("components", "@/components").set("views", "@/views").set("style", "@/style").set("api", "@/api").set("store", "@/store").set("filters", "@/filters").set("utils", "@/utils").set("router", "@/router");// 对vue-cli内部的 webpack 配置进行更细粒度的修改。// 添加CDN参数到htmlWebpackPlugin配置中， 详见public/index.html 修改if (isProduction || isDev) {config.plugin("html").tap(args => {args[0].cdn = cdn.build;return args;})config.externals = externals}},css: {// 是否使用css分离插件 ExtractTextPluginextract: isProduction,// 开启 CSS source maps?sourceMap: !isProduction,// css预设器配置项// 启用 CSS modules for all css / pre-processor files.requireModuleExtension: true,loaderOptions: {sass: {data: '@import "style/_mixin.scss";@import "style/_variables.scss";@import "style/_flex.scss";' // 全局引入}}},lintOnSave: !isProduction, // default false// 打包时不生成.map文件productionSourceMap: false,
};

// cli5
const Timestamp = new Date().getTime();
const CompressionWebpackPlugin = require("compression-webpack-plugin");
const TerserPlugin = require('terser-webpack-plugin');
const env = process.env.NODE_ENV;
const isProduction = env === "production";
const isDev = env === "development";
// cdn预加载使用
const externals = {vue: "Vue",vuex: "Vuex",axios: "axios","vue-router": "VueRouter",
};
const cdn = {// 生产环境build: {css: [],js: ["//cdn.staticfile.net/vue/2.7.14/vue.min.js","//cdn.staticfile.net/vuex/3.0.1/vuex.min.js","//cdn.staticfile.net/axios/1.6.0/axios.min.js","//cdn.staticfile.net/vue-router/3.6.5/vue-router.min.js",]}
};module.exports = {publicPath: "/mch",filenameHashing: true,configureWebpack: config => {// * 文件压缩const CompressionConfig = new CompressionWebpackPlugin({filename: '[path][base].gz[query]',algorithm: 'gzip',test: /\.(js|css|html|json|xml|svg|txt|md|ico)(\?.*)?$/i,threshold: 10240,minRatio: 0.8,deleteOriginalAssets: false, // 保留原始文件})const TerserPluginConfig = new TerserPlugin({parallel: true,terserOptions: {compress: {drop_console: true, // 移除 consoledrop_debugger: true, // 移除 debuggerpure_funcs: ['console.log'] // 移除 console.log},mangle: {toplevel: true // 顶层变量重命名},output: {comments: false // 删除所有注释}}})// 定义通用的配置更改，包括输出文件名const commonConfig = {output: {// 为了更好的缓存控制，使用 contenthashfilename: `js/[name].[contenthash:8].js`,chunkFilename: `js/[name].[contenthash:8].chunk.js`},optimization: {splitChunks: {chunks: 'all',cacheGroups: {vendor: {name: 'chunk-vendors',test: /[\\/]node_modules[\\/]/,priority: 10,chunks: 'initial'},lodash: {name: 'ed42d6dedd435e6f',test: /[\\/]node_modules[\\/](lodash)[\\/]/,priority: 20},viewui: {name: '215543f1ffd2f793',test: /[\\/]node_modules[\\/](view-design)[\\/]/,priority: 20}}},minimizer: []},plugins: [CompressionConfig]};// 如果是生产环境，添加额外的配置if (isProduction || isDev) {// * 构建文件大小的性能提示commonConfig.performance = {hints: false};commonConfig.optimization.minimizer.push(TerserPluginConfig)} else {// 本地开发环境需要的插件// * commonConfig.plugins.push(new BundleAnalyzerPlugin());}return commonConfig;},chainWebpack: config => {// 设置目录别名aliasconfig.resolve.alias.set("assets", "@/assets").set("components", "@/components").set("views", "@/views").set("style", "@/style").set("api", "@/api").set("store", "@/store").set("filters", "@/filters").set("utils", "@/utils").set("router", "@/router")// 添加对 /assets 路径的解析支持，保持向后兼容.set("/assets", "@/assets");// 针对CSS文件也使用contenthash以获得更好的缓存控制if (isProduction) {config.plugin('extract-css').tap(args => {args[0].filename = 'css/[name].[contenthash:8].css';args[0].chunkFilename = 'css/[name].[contenthash:8].css';return args;});}},css: {// 是否使用css分离插件 ExtractTextPluginextract: isProduction,// 开启 CSS source maps?sourceMap: !isProduction,// css预设器配置项// 启用 CSS modules for all css / pre-processor files.loaderOptions: {sass: {// prependData 在新版本中已被 additionalData 替代additionalData: '@import "style/_variables.scss";@import "style/_flex.scss";' // 全局引入}}},lintOnSave: !isProduction, // default false// 打包时不生成.map文件productionSourceMap: false,
};

eslintrc.js

// cli4
module.exports = {root: true,env: {node: true},extends: ["plugin:vue/essential"],rules: {"no-console": process.env.NODE_ENV === "production" ? "error" : "off","no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",// 强制使用单引号quotes: [0, "single"],"comma-dangle": [0, "never"], //是否允许对象中出现结尾逗号// 关闭函数名与后面括号间必须空格规则"space-before-function-paren": 0,// 关闭var 声明，每个声明占一行规则。"one-var": 0,"no-console": 0,semi: 0, //结尾分号indent: "off", //文本缩进风格"no-irregular-whitespace": 0,"no-multi-spaces": 0,"eol-last": 0 //文本是否已单一换行符结束},parserOptions: {parser: "babel-eslint"}
};

// cli5
module.exports = {root: true,env: {node: true},extends: ["plugin:vue/essential"],rules: {"no-console": process.env.NODE_ENV === "production" ? "error" : "off","no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",// 强制使用单引号quotes: [0, "single"],"comma-dangle": [0, "never"], //是否允许对象中出现结尾逗号// 关闭函数名与后面括号间必须空格规则"space-before-function-paren": 0,// 关闭var 声明，每个声明占一行规则。"one-var": 0,"no-console": 0,semi: 0, //结尾分号indent: "off", //文本缩进风格"no-irregular-whitespace": 0,"no-multi-spaces": 0,"eol-last": 0, //文本是否已单一换行符结束'vue/no-parsing-error': [2, { "x-invalid-end-tag": false }],   // 关闭标签 end 校验，处理 UI组件误报// 添加以下规则来忽略新版本中新增的告警"vue/multi-word-component-names": "off",  // 关闭组件名必须为多单词的规则"vue/require-prop-type-constructor": "off",  // 关闭 prop type 必须为构造函数的规则"vue/no-mutating-props": "off",  // 关闭不能修改 props 的规则"vue/return-in-computed-property": "off",  // 关闭 computed 属性必须返回值的规则"vue/valid-next-tick": "off",  // 关闭 nextTick 使用方式的校验"vue/valid-v-bind-sync": "off"  // 关闭 v-bind.sync 的校验},parserOptions: {// 将 babel-eslint 更新为 @babel/eslint-parserparser: "@babel/eslint-parser",// 添加 babel-eslint-parser 所需的配置requireConfigFile: false,babelOptions: {presets: ["@vue/cli-plugin-babel/preset"]}}
};

babel.config.js

module.exports = {presets: ['@vue/app']
}

module.exports = {presets: ['@vue/cli-plugin-babel/preset']
}

至此升级成功。