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


Posted in Javascript onMay 20, 2019

以下备忘升级至 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')
 }
 }
};

之后,在 IDE 中指定该文件路径:

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

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

5. 添加全局 Scss 文件

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

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

module.exports = {
 css: {
 loaderOptions: {
  sass: {
  data: `@import "@/styles/settings.scss";`
  }
 }
 }
};

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

当然,如果要在 .vue 文件中使用 SCSS 语法,需要在 <style> 标签中增加如下属性:

<style scoped lang="scss" type="text/scss">

</style>

6. 调整 ESLint 配置

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

{
 ...
 
 rules: {
 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
 'vue/no-unused-vars': 'off',
 'vue/no-empty-pattern': 'off'
 },
 
 ...
}

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 版本默认使用的是运行时模式,需要对 main.js 文件进行修改:

new Vue({
 router,
 store,
 render: h => h(App)
}).$mount('#app');

将其改为上述方式即可。

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

在项目中,如果使用如下方式引入 lodash:

import _ from 'lodash';

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

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

首先,安装如下依赖:

npm install babel-plugin-lodash --save-dev

然后在 babel.config.js 中添加如下内容:

module.exports = {
  ...
  
  plugins: [
    'lodash'
  ]
  
  ...
};

9. 配置 analyzer

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

首先安装依赖:

npm install webpack-bundle-analyzer --save-dev

然后在 vue.config.js 中添加如下配置:

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  ...
  
  configureWebpack: {
    plugins: [
      new BundleAnalyzerPlugin()
    ]
  },
  
  ...
};

然后在 package.json 中添加新的命令:

"analyze": "npm_config_report=true npm run build"

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

npm run analyze

注:采用这种方式后,每次 npm run devnpm run build 都会自动弹出分析页面。

如果不想这么做,可以直接使用如下方式( 无需安装 webpack-bundle-analyzer 依赖 ):

"analyze": "vue-cli-service build --report"

当执行 npm run analyze 后,/dist 文件夹下会生成 report.html 分析报告页面。

10. 引入外部 CDN

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

在使用 script 标签引入需要的 .js 文件后,在 vue.config.js 文件增加如下配置:

module.exports = {
  ...
  
  configureWebpack: {
    externals: {
      "echarts": "echarts",
    }
  },
  
  ...
}

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

import echarts from 'echarts';

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

当执行 npm run build 时,会出现警告信息:

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

此时,我们可以在 vue.config.js 中添加如下配置,忽略这条警告信息:

module.exports = {
  ...
  
  performance: {
    hints: false
  }
  
  ...
};

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript使用prototype定义对象类型
Feb 07 Javascript
jscript之Read an Excel Spreadsheet
Jun 13 Javascript
模仿JQuery.extend函数扩展自己对象的js代码
Dec 09 Javascript
jQuery 网易相册鼠标移动显示隐藏效果实现代码
Mar 31 Javascript
jQuery实现html元素拖拽
Jul 21 Javascript
Ajax验证用户名或昵称是否已被注册
Apr 05 Javascript
vue源码入口文件分析(推荐)
Jan 30 Javascript
Vue微信项目按需授权登录策略实践思路详解
May 07 Javascript
js+html实现点名系统功能
Nov 05 Javascript
js获取本日、本周、本月的时间代码
Feb 01 Javascript
微信小程序淘宝首页双排图片布局排版代码(推荐)
Oct 29 Javascript
一行JavaScript代码如何实现瀑布流布局
Dec 11 Javascript
解决Vue+Electron下Vuex的Dispatch没有效果问题
May 20 #Javascript
微信小程序上传文件到阿里OSS教程
May 20 #Javascript
详解微信小程序开发聊天室—实时聊天,支持图片预览
May 20 #Javascript
Vee-validate 父组件获取子组件表单校验结果的实例代码
May 20 #Javascript
React如何实现浏览器打印部分内容详析
May 19 #Javascript
koa-router路由参数和前端路由的结合详解
May 19 #Javascript
Vue.js中该如何自己维护路由跳转记录
May 19 #Javascript
You might like
Classes and Objects in PHP5-面向对象编程 [1]
2006/10/09 PHP
ThinkPHP实现分页功能
2017/04/28 PHP
php 可变函数使用小结
2018/06/12 PHP
PHP Primary script unknown 解决方法总结
2019/08/22 PHP
PHP架构及原理知识点详解
2019/12/22 PHP
javascript KeyDown、KeyPress和KeyUp事件的区别与联系
2009/12/03 Javascript
extJs 常用到的增,删,改,查操作代码
2009/12/28 Javascript
基于jQuery试卷自动排版系统
2010/07/18 Javascript
关于URL中的特殊符号使用介绍
2011/11/03 Javascript
JavaScript中判断原生函数检查function是否是原生代码
2014/09/09 Javascript
jQuery简单tab切换效果实现方法
2015/04/08 Javascript
JavaScript设置表单上传时文件个数的方法
2015/08/11 Javascript
jQuery实现类似标签风格的导航菜单效果代码
2015/08/25 Javascript
Javascript中的arguments对象
2016/06/20 Javascript
Angular.js 4.x中表单Template-Driven Forms详解
2017/04/25 Javascript
JavaScript变量声明var,let.const及区别浅析
2018/04/23 Javascript
vue生命周期与钩子函数简单示例
2019/03/13 Javascript
小程序实现图片移动缩放效果
2020/05/26 Javascript
vue 导出文件,携带请求头token操作
2020/09/10 Javascript
python让图片按照exif信息里的创建时间进行排序的方法
2015/03/16 Python
pyttsx3实现中文文字转语音的方法
2018/12/24 Python
python把1变成01的步骤总结
2019/02/27 Python
33个Python爬虫项目实战(推荐)
2019/07/08 Python
python 两个数据库postgresql对比
2019/10/21 Python
8种常用的Python工具
2020/08/05 Python
床上用品全球在线购物:BeddingInn
2016/12/18 全球购物
《一本男孩子必读的书》教学反思
2014/02/19 职场文书
软件项目开发计划书
2014/05/01 职场文书
社会实践活动总结范文
2014/07/03 职场文书
2014县委书记四风对照检查材料思想汇报
2014/09/21 职场文书
商场圣诞节活动总结
2015/05/06 职场文书
2015年初一班主任工作总结
2015/05/13 职场文书
摘录式读书笔记
2015/07/01 职场文书
再谈python_tkinter弹出对话框创建
2022/03/20 Python
星际争霸:毕姥爷vs解冻03
2022/04/01 星际争霸
ssh服务器拒绝了密码 请再试一次已解决(亲测有效)
2022/08/14 Servers