vuecli4升级到5遇到的问题总结

前言

公司的项目是用vue-cli4 构建的,最近要安装一个依赖,然后这个依赖在run serve是正常的,打包之后点击一次正常,再点击就报错。后面经过仔细排查,才发现是webpack的版本问题。

vue-cli4 安装的webpack4 的,vue-cli5 安装的是webpack5的。在vue-cli5安装这个依赖打包就没有这个问题。

所以接下来就要把vue-cli4升级到vue-cli5,因为是跨版本升级,很多写法,用法都不一样,太酸爽了,所以总结下这个过程,也算是温故知新。

正文

我们首先升级vue-cli的全局依赖。

我用的是yarn,如下

js 复制代码
// npm
npm update -g @vue/cli 
// yarn
yarn global upgrade --latest @vue/cli

升级成功,打印vue -V可以查看最新的版本。

然后可以使用vue upgrade升级项目的cli依赖(@vue/cli-plugin-开头或者vue-cli-plugin- 开头)。

然后安装对应的依赖,就算升级成功了。

但是你以为就好了吗?

node-polyfill-webpack-plugin

webpack4会自动引入node的核心模块,比如pathprocessos等等。而webpack5做了升级,不会自动引入,需要手动引入。

所以如果你的依赖有引用的话,打包的时候就会报错。

我们可以安装一个依赖来解决这个问题,node-polyfill-webpack-plugin

它可以自动引入node的核心模块,在vue.config.js中配置即可。

js 复制代码
  const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')
  // ...省略部分配置
  configureWebpack: {
    plugins: [
      new NodePolyfillPlugin()
    ]
  },

webpack自定义plugin

我们之前在项目写了一个webpack自定义插件,然后升级了vue-cli5后,打包报错了。

js 复制代码
  // vue.config.js
  chainWebpack: (config) => {
    // 自定义插件
    config.plugin('customPluginName').use(require('./xx/plugins/xx/xx.js'))
  },
  configureWebpack: {
  }
js 复制代码
// custom plugin.js
const path = require('path')
class VersionPlugin {
  apply (compiler) {
    compiler.options.entry = {
      ...compiler.options.entry,
      version: './xxx/version.js'
    }
  }
}
module.exports = VersionPlugin

查看了webpack5的文档,才发现入口的写法更丰富了。

原来entry可以是字符串,或者是字符串对象,数组。

js 复制代码
entry: './app.js'

// or
entry: {
 app: './app.js',
 about: './xxx'
}

现在的webpack5在这个基础上,还支持importdependOn等字段。

js 复制代码
entry: {
 app: {import: './app.js'},
 about: {import:'./xxx', dependOn: 'xxx'}
}

看了wepback的部分源码发现,如果你的对象的value是字符串,它会拼接好一个import字段,并且是数组。如下:

但是我的自定义插件更改入口的执行时机晚于它这个时机,所以如果没有包裹import,它就会报错。

所以,自定义插件如果要更改入口,都要拼接import字段,防止报错。

js 复制代码
const path = require('path')
class VersionPlugin {
  apply (compiler) {
    compiler.options.entry = {
      ...compiler.options.entry,
      version: { import: ['./xxx/version.js'] }
    }
  }
}
module.exports = VersionPlugin

copy-webpack-plugin

首先我们项目用了copy-webpack-plugin来复制文件,vue-cli内置了它,但是版本不一样。

vue-cli4 安装了5.x.x版本的, vue-cli5 安装了9.x.x版本的。

js 复制代码
 // copy-webpack-plugin v5.x.x
 plugins: [
      new CopyWebpackPlugin([{
            from: path.resolve(__dirname, './xx/xx/*.js'),
            to: 'js/[name].[ext]'
          }])
    ]
    
 // copy-webpack-plugin v9.x.x
 plugins: [
      new CopyWebpackPlugin({
         patterns: [{
            from: path.resolve(__dirname, './xx/xx/*.js').replace(/\\/g, '/'),
            to: 'js/[name][ext]'
          }]
      })
    ]

可以看到[name].[ext]一个中间有点,一个中间没点。

还有带*的写法,需要调用replace去替换\,适应glob匹配。(不带*可以不用调用replace)

eslint

如果你有使用eslint,vue-cli5的eslinteslint-plugin-vue的版本也升级了,跨版本升级会导致很多eslint规则都改变了,以前没有报错的,现在会疯狂报错。

比如组件的名称不能使用单个词,nextTick不能同时使用await和callback,不要对props传入的对象的key进行赋值修改。

太酸爽了,改这170个eslint错误。

总结

以上就是vuecli4升级到5遇到的问题总结,我建议不到万不得已不要在老项目上直接升级,不然会有很多bug等着你修复,最好是在新的项目使用vue-cli5。

不说了,我eslint的bug还没改完,还在改。。。

相关推荐
wakangda20 分钟前
React Native 集成原生Android功能
javascript·react native·react.js
吃杠碰小鸡23 分钟前
lodash常用函数
前端·javascript
emoji11111132 分钟前
前端对页面数据进行缓存
开发语言·前端·javascript
泰伦闲鱼35 分钟前
nestjs:GET REQUEST 缓存问题
服务器·前端·缓存·node.js·nestjs
m0_7482500339 分钟前
Web 第一次作业 初探html 使用VSCode工具开发
前端·html
一个处女座的程序猿O(∩_∩)O1 小时前
vue3 如何使用 mounted
前端·javascript·vue.js
m0_748235951 小时前
web复习(三)
前端
迷糊的『迷』1 小时前
vue-axios+springboot实现文件流下载
vue.js·spring boot
User_undefined1 小时前
uniapp Native.js原生arr插件服务发送广播到uniapp页面中
android·javascript·uni-app
web135085886351 小时前
uniapp小程序使用webview 嵌套 vue 项目
vue.js·小程序·uni-app