淺析 vue-cli2和vue-cli4

淺析

vue-cli2和vue-cli4

01

安裝及版本切換

查看當前版本，若是是2開頭說明當前使用的是vue-cli2，4開頭的話就是vue-cli4

若是沒法識別vue命令說明沒有安裝vue-cli，使用如下說明進行安裝

安裝2.0版本:

安裝4.0版本：

版本切換，即卸載當前版本，安裝另外的版本

從2.0升級到4.0：

從4.0降到2.0

02

項目初始化  

.0初始化，vue init <模板名稱（webpack比較經常使用）> [項目名稱]

2.0項目初始化參數介紹 

2.0項目初始化參數推薦

4.0初始化，vue create [項目名稱]

4.0項目初始化參數介紹

4.0項目初始化參數推薦

03

目錄結構對比

2.0目錄結構

4.0 目錄結構

對比一下兩種方式初始化出來的項目結構，下面說一些對咱們開發影響比較大的主要的變化

一、4.0版本中項目環境變量配置文件沒有了（dev.env.js / prod.env.js）

咱們能夠經過在項目根目錄下手動建立不一樣環境的配置文件，具體的環境變量名稱由package.json中運行參數決定,下面舉個例子添加development、production和uat版本的環境變量：

————————

二、4.0版本中不一樣環境的webpack配置文件也沒有了（webpack.base.conf.js / webpack.dev.conf.js / webpack.prod.conf.js）

一樣，咱們也能夠再根目錄中建立vue.config.js文件來進行webpack和vue的一些配置

04

 IE兼容性 

2.0版本構建出來的項目，若是使用路由懶加載(Promise)，或者其餘ES6語法，在IE中會報錯語法不支持Promise，或者報其餘錯誤，最終結果都是router-view中加載不出來內容
4.0版本不會出現此問題，由於腳手架已經幫咱們作好了

解決辦法1

1.安裝@babel/polyfill

2.配置webpack.base.conf.js中的entry

解決辦法2

辦法1應該能夠正常加載異步路由，若是還未顯示，能夠試另一種方法：

1.安裝babel-preset-es2015

2.在根目錄下的 .babelrc 添加es2015

持續更新......