以下备忘升级至 Vue CLI 3.x 版本后，将项目目录改为新结构时所需做的一些改动。
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）的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章，希望大家都能在编程的领域有一番成就！版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/46870.html