前言
今年年初Vue CLI发布了5版本,也进入维护模式了,其搭载Webpack 5,为了使用Webpack 5的一些新特性。
比如:持久化缓存、更强大的tree-shaking、构建现代模式等。
尝试把一个老的Vue CLI 4版本的项目升级到Vue CLI 5。
1、升级依赖
根目录执行vue upgrade或者手动更新依赖
"@vue/cli-plugin-babel": "~4.5.19",
"@vue/cli-plugin-eslint": "~4.5.19",
"@vue/cli-plugin-unit-jest": "~4.5.19",
"@vue/cli-service": "~4.5.19"
更新到
"@babel/core": "^7.12.16",
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-plugin-unit-jest": "~5.0.0",
"@vue/cli-service": "~5.0.0",
2、修改配置
2.1、不支持 overlay
报错:options has an unknown property 'overlay'. These properties are valid
去掉devServer.overlay属性
2.2、devServer的before、after
v5的devServer去掉了before和after,添加了setupMiddlewares
middlewares.unshift,如果要在所有其他中间件之前运行中间件,请使用unshift方法
middlewares.push,如果要在所有其他中间件之后运行中间件,请使用push方法
// vue.config.js
module.exports = {
devServer: {
//after: mockServer(), //v4
setupMiddlewares: (middlewares, devServer) => {
if (!devServer) {
throw new Error('webpack-dev-server is not defined');
}
mockServer(devServer.app)
return middlewares;
},
},
};
3、修复问题
3.1、ERROR ValidationError: Progress Plugin Invalid Options
- 方案一:关闭打包进度
vue.config.js中配置process.env.VUE_CLI_TEST = false
或以下配置
// vue.config.js
devServer: {
progress: false,
},
- 方案二:检查下有没有package peerDependencies 包含webpack4.x
查看package-lock.json文件,看下有哪些npm包依赖是webpack 4版本的,升级这些依赖到使用webpack 5的版本
参考文档:https://github.com/vuejs/vue-cli/issues/6840
3.2、dev-server打开0.0.0.0
不管 vue-cli-service serve --open 还是在vue.config.js里配置devServer.open为true,浏览器都是默认打开0.0.0.0:8080
这是vue-cli@5.0.8的一个bug,可以等官方修复,或暂时这么兼容
- 方案一:Local和Network都是localhost,局域网无法访问
vue-cli-service serve --open --host localhost
或者设置vue.config.js的devServer.host = 'localhost'
- 方案二:自动打开的端口都一样,但还是可以开多个服务的,端口会自增
vue.config.js
const port = process.env.port || 8360;
module.exports = {
devServer: {
port,
open: {
target: [`http://localhost:${port}`]
}
}
}
3.3、CSS自动化引入
如果你想自动化导入文件 (用于颜色、变量、mixin……),vue-cli-plugin-style-resources-loader@0.1.4版本太低用不了了
// vue.config.js
const path = require('path')
module.exports = {
chainWebpack: config => {
const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
types.forEach(type => addStyleResource(config.module.rule('less').oneOf(type)))
},
}
function addStyleResource (rule) {
rule.use('style-resource')
.loader('style-resources-loader')
.options({
patterns: [
path.resolve(__dirname, './src/styles/settings/variables.less'),
],
})
}
3.4、CSS Modules
JS中使用less变量
// src/styles/export-to-js.less
@primary-color: #66ccff;
// the :export directive is the magic sauce for webpack
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
:export {
/* stylelint-disable */
primaryColor: @primary-color;
}
1、文件名改为export-to-js.module.less
2、import不支持解构赋值
// import { primaryColor } from '@/styles/export-to-js.module.less' 不支持这种写法
import lessVariables from '@/styles/export-to-js.module.less'
lessVariables.primaryColor
3.5、缺少Node.js的polyfill
webpack4带了许多Node.js核心模块的polyfill,一旦模块中使用了任何核心模块(如path、url),这些模块就会被自动启用
webpack5不再自动引入这些polyfill,如果有使用到nodejs核心模块,需要手动引入,如果不需要node polyfill,按照提示 alias 设置为 false 即可
例如用到path模块,先npm i path-browserify -D
,再修改vue-cli配置
// vue.config.js
module.exports ={
configureWebpack: {
resolve: {
fallback: { path: require.resolve('path-browserify') }
}
}
}
或者使用node-polyfill-webpack-plugin插件
npm i node-polyfill-webpack-plugin -D
// vue.config.js
const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')
configureWebpack: {
plugins: [new NodePolyfillPlugin()],
}
还没有评论,快来抢第一吧