vue cli 3 升级到 vue cli 4 配置总结+移动适配方案

官方升级英文文档，中文文档相对滞后。学习地址

简介：vue cli 4 官方已经更新有一段时间了，现在是4.0.5 版本，看了官方文档大概有二十几点的更新，还是干货满满呀，值得升级一下，下面是升级步骤。

一.首先，在全局安装最新的 Vue CLI：

npm install -g @vue/cli
# OR
yarn global add @vue/cli

-   检查安装的版本

vue -V  # 输出:@vue/cli 4.x.x  说明@vue/cli 4安装成功( vue cli 3的版本会输出 3.x.x )

二. 创建Vue项目

vue create hello-world //创建一个项目

三.在项目根目录下执行(升级插件)

vue upgrade

四.等步骤二 执行完会发现主要有 2 个文件被修改

1. 文件 babel.config.js
2. 文件 package.json （package-lock.json 也会更改）

五.然后启动项目

npm run serve

六.问题回顾

•  解决问题思路

七.环境配置

• vue.config.js文件/dev/pro/test环境的配置

• vue.config.js常用配置详解

• Vue CLI 配置vue.config.js中文网

八.VUE 适配移动端解决方案

1. 使用媒体查询
2. vue使用lib-flexible和postcss-px2rem-exclude | 代码地址

方案二遗留问题：

• vue-cli 3.0移动端项目：flexible、px2rem解决移动端适配，并且连带解决第三方ui库变小

九.前端优化之lazy-load

十.部署上线

参考链接

   vue cli 4 官方英文升级文档