Vue CLI 4升级5版本

前言

今年年初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()],
}