vuecli2升级3（vue项目升级cli3）

大家好，我是讯享网，很高兴认识大家。

 <p>以下备忘升级至 Vue CLI 3.x 版本后，将项目目录改为新结构时所需做的一些改动。</p>

讯享网

1. 卸载与安装

注：若要使用 Vue CLI 3，需将 Node 版本升级至 8.9 及以上。

当使用 nvm 管理 node 版本时，可以使用如下方式切换至需求的 Node 版本：

2. 环境变量与多环境配置

2.1 环境变量

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

而在 Vue CLI 3.x 中，我们可以使用配置文件的方式便捷的进行配置：

在项目中新建文件，写入

即可在需要的地方使用调用了。注意，这里环境变量必须以开头。

2.2 多环境配置

配置文件同样支持多环境，即文件表示环境；文件表示环境。

在使用命令时，可以通过指定来启用某一环境的环境变量。

注：文件为所有环境的公用环境变量。

2.3 本地多环境配置

在 Vue CLI 3 中，声明了对不进行 Git 版本控制。

对于一些无需上传到代码仓库的配置，可以使用这一方式。

3. 静态资源文件

Vue CLI 3.x 将默认资源文件根路径放到了目录下，而默认精简掉了 2.x 版本中的目录。因而之前放置于目录中的资源文件及其引用位置需要做些调整。

4. 在 WebStorm 中配置对 @ 符号的支持

默认情况下，JetBrains 系列的 IDE 无法对 Vue 指定的符号进行正确的路径识别。此时我们可以在项目根文件夹下创建文件，并写入：

讯享网

之后，在 IDE 中指定该文件路径：

之后，IDE 便能正确识别所表示的路径了。

5. 添加全局 Scss 文件

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

在 Vue CLI 3 中，我们可以在根目录下新建一个文件，写入如下内容:

此时，该文件中的变量值便能在任意 Vue 组件中使用了。

当然，如果要在文件中使用 SCSS 语法，需要在标签中增加如下属性：

6. 调整 ESLint 配置

ESLint 对未使用的变量和函数参数都做了限制，但原项目中确实有些地方需要保留这些 “暂时用不上” 的变量，因而这里对默认的 ESLint 设置做了调整，即修改文件：

7. Compiler 模式变更为 Runtime 模式

在升级至 Vue CLI 3 之后，直接运行可能会出现如下报错：

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

(found in <Root>)

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

将其改为上述方式即可。

8. 配置 lodash 使其模块化加载

在项目中，如果使用如下方式引入 lodash：

那么，即使只使用了其中的方法，也会将全部的 lodash 依赖压缩到 .js 文件中。这不是我们期望的。

此时，我们可以通过如下方式，使其能够在这种引入方式下，也能自动实现模块加载：

首先，安装如下依赖：

然后在中添加如下内容：

9. 配置 analyzer

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

首先安装依赖：

然后在中添加如下配置：

然后在中添加新的命令：

之后，便可以执行以下语句来查看项目编译后文件大小组成了：

注：采用这种方式后，每次或都会自动弹出分析页面。

如果不想这么做，可以直接使用如下方式（无需安装依赖）：

当执行后，文件夹下会生成分析报告页面。

10. 引入外部 CDN

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

在使用标签引入需要的 .js 文件后，在文件增加如下配置：

即可在需要的地方按如下方式使用了：

11. 忽略编译文件大小限制警告

当执行时，会出现警告信息：

asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).

此时，我们可以在中添加如下配置，忽略这条警告信息：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

vuecli2升级3（vue项目升级cli3）

相关推荐