Vue - Vue CLI(4): Vue-CLI2 和 Vue-CLI三、Vue-CLI4的區別

週末在家新建了一個 Vue 測試項目，但無論怎麼建，總會提示一些 有的沒的，雜七雜八的信息，如：找不到 funding、存在多少漏洞(vulnerabilities) 什麼的。以下所示：

尋思着，出現這些問題的緣由，應該是一些 不過重要的依賴包 更新了版本 或 遷移了地址，致使以前的 Vue-CLI 找不到 對應的版本 或 依賴包地址了。

雖然暫時沒發現這些錯誤對項目的運行和打包有啥影響，可是一句話，看着不爽。既然看着不爽，就想收拾它，怎麼收拾呢。此處不留爺，爺就換一種 新建方式，因而引起出另外一個坑：Vue CLI2 與 Vue CLI4 的區別(Vue CLI3 和 Vue CLI4區別不大，這裏以Vue CLI版本爲例)

 Vue CLI2 與 Vue CLI4 的區別(宏觀區別)主要有如下幾個：

一、安裝、卸載命令

　　Vue CLI2：

　　安裝: npm install -g vue-cli 或 cnpm install -g vue-cli
　　卸載: npm uninstall -g vue-cli 或 cnpm uninstall -g vue-cli

　　Vue CLI4：

　　安裝: npm install -g @vue/cli 或 cnpm install -g @vue/cli
　　卸載: npm uninstall -g @vue/cli 或 cnpm uninstall -g @vue/cli

二、項目建立命令

　　Vue CLI2：

　　vue init webpack vue-cli2　　　　// vue-cli2 爲項目名稱，項目名稱不能出現大寫字母

　　Vue CLI4：

　　vue create vue-cli4    　　　　  // vue-cli4 爲項目名稱

三、項目目錄結構

　　Vue CLI2新建項目，目錄結構：

　　

 　　Vue CLI4新建項目，目錄結構：

　　

　　從兩個新建的項目 目錄結構來看，差異很大：Vue CLI4新建的項目，根目錄結構內 少了以前的 build、config、static文件夾，配置文件也少了幾個，連 index.html 都沒有了，但多了一個 public 文件夾。

四、啓動項目命令

　　兩個項目啓動命令的區別在各自的 package.json 文件配置中就能看出。

　　Vue CLI2：npm run dev

　　

　　Vue CLI4：npm run serve

　　

五、項目首頁

　　Vue CLI2：

　　

　　Vue CLI4：

　　

 

Vue CLI2 與 Vue CLI4 宏觀上的區別大致上就這麼幾個，接下來討論另外一個問題：用Vue-CLI三、Vue-CLI4建立的項目 打包及打包優化 配置