Vue CLI2升级至升级至Vue CLI3的方法步骤的方法步骤
主要介绍了Vue CLI2升级至Vue CLI3的方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具
有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
以下备忘升级至 Vue CLI 3.x 版本后,将项目目录改为新结构时所需做的一些改动。
1. 卸载与安装卸载与安装
npm uninstall vue-cli -g
npm install -g @vue/cli
注:若要使用 Vue CLI 3,需将 Node 版本升级至 8.9 及以上。
当使用 nvm 管理 node 版本时,可以使用如下方式切换至需求的 Node 版本:
# 安装 >= 8.9 的某个版本
nvm install 8.12.0
# 在当前 session 中使用该版本
nvm use 8.12.0
# 设置默认的 Node 版本
nvm alias default 8.12.0
2. 环境变量与多环境配置环境变量与多环境配置
2.1 环境变量环境变量
在 Vue CLI 2.x 中,如果需要定义环境变量,需要在 build/webpack.dev.conf.js 中加入:
plugins: [
new webpack.DefinePlugin({
'process.xxx': "'some value'",
})
]
而在 Vue CLI 3.x 中,我们可以使用配置文件的方式便捷的进行配置:
在项目中新建 .env 文件,写入
VUE_APP_KEY=VALUE
即可在需要的地方使用 process.env.VUE_APP_KEY 调用了。注意,这里环境变量必须以 VUE_APP_ 开头。
2.2 多环境配置多环境配置
配置文件同样支持多环境,即 .env.development 文件表示 development 环境;.env.production 文件表示 production 环境。
在使用 npm 命令时,可以通过指定 --mode xxx 来启用某一环境的环境变量。
注:.env 文件为所有环境的公用环境变量。
2.3 本地多环境配置本地多环境配置
在 Vue CLI 3 中,声明了对 .env.*.local 不进行 Git 版本控制。
对于一些无需上传到代码仓库的配置,可以使用这一方式。
3. 静态资源文件静态资源文件
Vue CLI 3.x 将默认资源文件根路径放到了 /public 目录下,而默认精简掉了 2.x 版本中的 /static 目录。因而之前放置于 /static 目
录中的资源文件及其引用位置需要做些调整。
4. 在在 WebStorm 中配置对中配置对 @ 符号的支持符号的支持
默认情况下,JetBrains 系列的 IDE 无法对 Vue 指定的 @ 符号进行正确的路径识别。此时我们可以在项目根文件夹下创建
webpack.config.js 文件,并写入:
module.exports = {
resolve: {
alias: {
'@': require('path').resolve(__dirname, 'src')
}
评论0