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 相关文章推荐
jQuery通过控制节点实现仅在前台通过get方法完成参数传递
Feb 02 Javascript
JavaScript从数组中删除指定值元素的方法
Mar 18 Javascript
jquery判断单选按钮radio是否选中的方法
May 05 Javascript
jQuery简单操作cookie的插件实例
Jan 13 Javascript
JS实现显示带倒影的图片横排居中放大展示特效实例【测试可用】
Aug 23 Javascript
利用JS实现文字的聚合动画效果
Jan 22 Javascript
详解Vue 事件驱动和依赖追踪
Apr 22 Javascript
Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码
Nov 15 Javascript
浅谈vue中关于checkbox数据绑定v-model指令的个人理解
Nov 14 Javascript
微信小程序rich-text富文本用法实例分析
May 20 Javascript
JavaScript面向对象中接口实现方法详解
Jul 24 Javascript
js验证密码强度解析
Mar 18 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
PHP iconv 解决utf-8和gb2312编码转换问题
2010/04/12 PHP
PHP header()函数使用详细(301、404等错误设置)
2013/04/17 PHP
smarty内置函数{loteral}、{ldelim}和{rdelim}用法实例
2015/01/22 PHP
php准确获取文件MIME类型的方法
2015/06/17 PHP
PHP使用redis实现统计缓存mysql压力的方法
2015/11/14 PHP
你需要知道的JavsScript可以做什么?
2007/06/29 Javascript
把多个JavaScript函数绑定到onload事件处理函数上的方法
2016/09/04 Javascript
微信小程序 获取相册照片实例详解
2016/11/16 Javascript
Bootstrap3 多个模态对话框无法显示的解决方案
2017/02/23 Javascript
微信小程序本地缓存数据增删改查实例详解
2017/05/24 Javascript
微信小程序自定义音乐进度条的实例代码
2018/08/28 Javascript
Cookbook组件形式:优化 Vue 组件的运行时性能
2018/11/25 Javascript
js canvas画布实现高斯模糊效果
2018/11/27 Javascript
vue的滚动条插件实现代码
2019/09/07 Javascript
Vue学习之axios的使用方法实例分析
2020/01/06 Javascript
解决微信小程序scroll-view组件无横向滚动的问题
2020/02/04 Javascript
Python内置函数的用法实例教程
2014/09/08 Python
简单分析Python中用fork()函数生成的子进程
2015/05/04 Python
numpy的文件存储.npy .npz 文件详解
2018/07/09 Python
对python中的乘法dot和对应分量相乘multiply详解
2018/11/14 Python
Python3爬虫使用Fidder实现APP爬取示例
2018/11/27 Python
python add_argument()用法解析
2020/01/29 Python
matplotlib.pyplot.matshow 矩阵可视化实例
2020/06/16 Python
Python tkinter制作单机五子棋游戏
2020/09/14 Python
CSS3 实现时间轴动画
2020/11/25 HTML / CSS
远程学习的教学用品和家庭学习资源:Really Good Stuff
2020/04/27 全球购物
网上商城创业计划书范文
2014/01/31 职场文书
基督教婚礼主持词
2014/03/14 职场文书
毕业生就业推荐表导师评语
2014/12/31 职场文书
万能检讨书
2015/01/27 职场文书
小学推普周活动总结
2015/05/07 职场文书
员工手册编写范本
2015/05/14 职场文书
用JS写一个发布订阅模式
2021/11/07 Javascript
MySQL表类型 存储引擎 的选择
2021/11/11 MySQL
使用Docker容器部署rocketmq单机的全过程
2022/04/03 Servers
SqlServer常用函数及时间处理小结
2023/05/08 SQL Server