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

关注

原创最新推荐文章于 2026-03-09 23:37:45 发布 2.7k 阅读 AI 写同款· GEO 优化 ›

vue2.6升级vue2.7（panjiachen升级指南）vue-cli5多页面应用升级的坑 webpack5 不再自动填充 Node 核心模块，如果你想使用的话需要从 npm 安装兼容的模块并自己包含它们。比如这里报错 ‘disableHostCheck’ 是未知属性，就可以在这个文档中查一下，看看它改成了什么。升级 sass 版本和 sass-loader 版本，注意里面 deep 写法也需要改变，需要改为。升级完 vue-cli 需要解决一下 vue-cli 语法升级报的错，需要修改。如果不这么做，需要进行如下操作，十分麻烦。，使用的是 vue2.6.14，现在升级为 vue2.7.x。阅读详情

前言

公司的项目是用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的核心模块，比如path，process，os等等。而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在这个基础上，还支持import，dependOn等字段。

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)