Vue CLI2升级到Vue CLI3的方法步骤

以下是升级到vuecli版后，将项目目录更改为新结构所需的一些更改.

1.卸载并安装

Npm卸载vue-CLI-gnpminstall-g @ vue/CLI注意：如果要使用Vue CLI 3，需要将Node版本升级到8.9及以上版本。

使用nvm管理节点版本时，可以通过以下方式切换到所需的节点版本：

#安装一个版本的nvm安装8.12.0#=8.9 #使用这个版本的nvm使用8.12.0#来设置默认的Node版本nvm别名默认为8.12.02。当前会话中的环境变量和多环境配置

2.1环境变量

在Vue CLI 2.x中，如果需要定义环境变量，需要添加：

插件：[新的网络包。定义插件({'process。XXX' : ''某个值' '，})]。在Vue CLI 3.x中，我们可以通过配置文件方便地进行配置：

创建新的。项目中的env文件并写入

必要时可以使用process.env.VUE_APP_KEY调用VUE_APP_KEY=VALUE。请注意，这里的环境变量必须以VUE_APP_开头。

2.2多环境配置

配置文件还支持多种环境，即。env.development文件表示开发环境；那个。env.production文件表示生产环境。

使用npm命令时，可以通过指定-modexxx来启用环境的环境变量。

注：该。env文件是所有环境的通用环境变量。

2.3本地多环境配置

在Vue CLI 3中，声明不在上执行Git版本控制。环境。*.local。

对于一些不需要上传到代码仓库的配置，可以使用这个方法。

3.静态资源文件

Vue CLI 3.x将默认的资源文件根路径放在/public目录中，而2.x版本中的默认/static目录被缩减。因此，需要调整先前放在/static目录中的资源文件及其引用位置。

4.在网络风暴中配置对@符号的支持

默认情况下，JetBrains系列的IDE无法识别Vue指定的@符号的正确路径。此时，我们可以在项目的根文件夹下创建webpack.config.js文件并编写它：

module . exports={ resolve : { alias : }“@”: require(' path ')。resolve(__dirname，' src ')} } }；然后，在集成开发环境中指定文件路径：

之后，IDE就可以正确识别@所代表的路径。

5.添加全局Scss文件

在前端项目中，经常使用相同的主题颜色。此时，我们需要存储这些变量并将其引入全局。

在Vue CLI 3中，我们可以在根目录中创建新的vue.config.js文件，并编写以下内容：

module . exports={ CSS : { loaderooptions 3360 { SAS : { data : ` @ import ' @/style/settings . scss '；` } } }};此时，文件settings.scss中的变量值可以用在任何Vue组件中。

当然，如果您想在。vue文件中，您需要在样式标签中添加以下属性：

样式范围lang=' SCS ' type=' text/SCS '/style 6。调整ESLint配置

ESLint限制了未使用的变量和函数参数，但原始项目中有些地方需要保留这些“暂时不可用”的变量，所以这里调整了默认的ESLint设置，即修改eslintrc.js文件：

{ .rules: { '无控制台' : process . ENV . NODE _ ENV===' production '？错误' : '关闭'，'无调试器' : process . ENV . node _ ENV===' production '？错误' : '关闭'，' vue/无未使用的vars' : '关闭'，' vue/无空模式' : '关闭' }，} 7.编译器模式更改为运行时模式

升级到Vue CLI 3后，直接运行时可能会出现以下错误：

[Vue警告]:您正在模板编译器不可用的地方使用Vue的仅运行时版本。要么将模板预编译成呈现函数，要么使用编译器包含的构建。

(在根目录中找到)

这是因为3.x版本默认使用运行时模式，需要修改main.js文件：

new Vue({路由器、商店、render: h=h(App)})。$ mount(' # app ')；可以更改为上述模式。

8.将lodash配置为模块化加载

在本项目中，若lodash介绍如下：

import _ from ' lodash然后，即使只有_。使用get()方法，所有lodash依赖项都将被压缩到。js文件。这不是我们所期望的。

此时，我们可以使用以下方法使其在此介绍模式下自动加载模块：

首先，安装以下依赖项：

NPM安装巴别塔-插件-洛达什-保存-开发，然后在巴别塔. config.js中添加以下内容：

module.exports={.plugins: [ 'lodash' ].};9.配置分析器

我们可以使用analyzer分析项目的编译文件组成，从而优化加载速度。

首先安装依赖项：

NPM安装web pack-bundle-analyzer-save-dev，然后在vue.config.js中添加以下配置：

const bundlealyzer plugin=require(' web pack-bundle-analyzer ')。BundleAnalyzerPluginmodule.exports={.configurewebpack k : { plugins :[new bundlealyzer plugin()]}，};然后在package.json中添加一个新命令：

在“analyze”:“NPM _ config _ report=true NPM run build”之后，您可以执行以下语句来检查已编译项目的文件大小组成：

Npm运行分析注意：采用此方法后，每次npm运行dev或npm运行build时，都会自动弹出分析页面。

如果不想这样做，可以直接使用以下方法(不需要安装webpack-bundle-analyzer依赖项):

分析' : ' vue-CLI-服务构建-报告'执行npm运行分析时，将在/dist文件夹下生成report.html分析报告页面。

10.引入外部CDN

我们可以用CDN来加速一些第三方的加载速度，而不是把它们全部打包在一起。

使用脚本标记导入所需的。js文件，将以下配置添加到vue.config.js文件中：

模块。导出={ 0.配置web pack : { external s : { ' e charts ' 3360 ' e charts '，}，}必要时可以按以下方式使用：

从“echart”导入echart；11.忽略编译文件大小限制警告

执行npm运行构建时，将出现一条警告消息：

资产大小限制：以下资产超过了建议的大小限制(244 KiB)。

此时，我们可以在vue.config.js中添加以下配置，并忽略此警告消息：

module.exports={.performance : { hints 3360 false }.};以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。