vue cli升级webapck4总结

首先需要了解的是Vue CLI是一个Vue.js的脚手架，用于快速搭建基于Vue.js的单页应用程序。Vue CLI 3是最新版本，其默认使用Webpack 4作为构建工具。

升级Vue CLI的过程可以分成以下几个步骤：

步骤一：检查当前Vue CLI版本

首先需要检查当前项目中所使用的Vue CLI版本，可以在Terminal里输入以下命令：

vue --version

如果版本低于3.x.x，则需要进行升级。

步骤二：更新Vue CLI脚手架

如果当前项目使用的是Vue CLI 2.x.x版本，需要先更新Vue CLI脚手架到最新版，输入以下命令：

npm install -g @vue/cli

步骤三：升级Vue CLI到3.x.x版本

升级Vue CLI可以使用以下命令：

vue upgrade

此命令将提供三个选项供选择：

Manually select features（手动选择功能）：强烈建议选择此选项，因为其可以避免不必要的繁琐操作
Upgrade in bulk（批量升级）：一键升级所有插件和配置文件
Check and diff all config files（检查和比较所有配置文件）：查看所有配置文件之间的差异，并决定是否更新

步骤四：升级Webpack到4.x.x版本

升级Webpack需要手动更改项目中的配置文件。需要更改的配置文件有：

package.json文件：Webpack和Webpack CLI的版本都需要升级
vue.config.js文件：将Webpack 3的配置更改为Webpack 4的配置

下面将分别介绍如何更改这两个配置文件。

修改package.json文件

将package.json文件中"dependencies"和"devDependencies"中的"webpack"和"webpack-cli"字段替换为Webpack 4的版本，如下：

"webpack": "^4.0.0",
"webpack-cli": "^3.1.0"

修改vue.config.js文件

如果项目中没有vue.config.js文件，则需要在根目录下创建一个。vue.config.js文件添加了一系列Vue CLI配置选项，可以用于自定义构建过程。以下是修改vue.config.js文件的基本步骤：

引入webpack模块。

const webpack = require('webpack')

使用configureWebpack选项覆盖Webpack配置。

module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery'
      })
    ]
  }
}

以上代码将在Webpack的最终配置中添加一个ProvidePlugin插件，可在全局范围内引入jQuery库。

示例一

下面是一个具体的升级示例，假设需要将一个使用Vue CLI 2.x.x版本构建的项目升级到Vue CLI 3.x.x版本并使用Webpack 4：

在终端中，进入项目文件夹并检查当前Vue CLI版本：

cd my-project
vue --version

更新Vue CLI脚手架到最新版：

npm install -g @vue/cli

升级Vue CLI至3.x.x版本：

vue upgrade

选择第一项“Manually select features”并选择需要更新的项目配置文件。

修改package.json文件，将"webpack"和"webpack-cli"字段的版本替换为Webpack 4的版本。
创建并修改vue.config.js文件，根据需要添加和修改Webpack配置。
安装Webpack 4所需依赖包：

npm install webpack@^4.0.0 webpack-cli@^3.1.0 --save-dev

重新启动项目并测试是否正常运行。

示例二

下面是另一个示例，假设需要在使用Vue CLI 3.x.x版本构建的项目中添加一个自定义Webpack插件。

在项目根目录下创建vue.config.js文件：

touch vue.config.js

在vue.config.js文件中添加如下代码：

const MyPlugin = require('my-webpack-plugin')
module.exports = {
  configureWebpack: {
    plugins: [
      new MyPlugin()
    ]
  }
}

在package.json文件的"devDependencies"字段中添加my-webpack-plugin的版本：

"my-webpack-plugin": "^1.0.0"

运行以下命令安装my-webpack-plugin：

npm install my-webpack-plugin --save-dev

以上就是升级Vue CLI并使用Webpack 4的过程，其中涉及到的示例可根据实际情况进行更改。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：vue cli升级webapck4总结 - Python技术站