碼文不易啊，轉載請帶上本文連結呀，感謝感謝 https://www.cnblogs.com/echoyya/p/14363272.html
關於VUE的專案，有個問題一直不是特別清楚 ，不同公司的專案，其專案結構，對應配置檔案位置，及啟動打包對應的命令等，都有所不同，近期通過查詢相關資料及公開視訊教學，整理一篇筆記，希望能幫跟我一樣困惑的同學，撥開迷霧！
公司在建立專案的時候，都會傾向使用腳手架vue-cli，vue-cli 提供一個官方命令列工具，能夠快速的搭建vue專案結構，同時可幫助配置各種檔案目錄及專案打包。其實就是一個基於webpack構建，可以讓使用者快速初始化一個專案的工具。
基本原理: vue-cli並非從無到有地憑空生成一個專案，而是通過(download-git-repo工具)下載/拉取已有的工程到本地，完成生成專案的工作。
而導致不同專案的配置及目錄不同的原因之一，就是腳手架的版本不同導致，接下來具體講述一下vue-cli 2.x和vue-cli 3+，專案構建、執行、編譯命令區別：
首先： cmd > vue -V,該命令檢視的是vue-cli的版本，並非vue的版本
| vue-cli 2.x | vue-cli 3+ | |
|---|---|---|
| 安裝 | npm install -g vue-cli |
npm install -g @vue/cli |
| 建立專案 | vue init webpack projectName |
vue create projectName |
| 編譯執行 | npm run dev |
npm run serve |
| 視覺化專案管理工具 | -- | vue ui 預設地址：localhost:8000 |
建立專案
-
搭建
vue-cli 3專案前，如若已安裝舊版本vue-cli，需先解除安裝舊版本vue-cli，再重新安裝vue-cli 3+，2個命令可以升級到3以上 -
node版本要求: Node.js8.9 或更高版本 ,輸入node -v檢視node版本 -
當vue-cli 版本達到
vue-cli4.5.0以上，就可以建立vue3.0的專案，支援體驗vue3.0的新特性，（3.x Preview）
目錄結構
-
vue-cli 3+的專案摒棄了 config 、 build 、 static 目錄，新增了
public目錄，將根目錄下的 index.html 放置在 public 目錄下。 -
新增
vue.config.js(需手動建立)配置檔案，可以在該檔案中進行webpack的相關配置，例如 loader、開發環境等。 -
新增
.browserslistrc檔案，指定專案的目標瀏覽器的範圍，用來確定需要轉譯的 JavaScript 特性和需要新增的 CSS 瀏覽器字首，可以理解為瀏覽器相容。 -
新增
babel.config.js替代原先的.babelrc，具備和原先.babelrc一樣的作用。 -
src資料夾中多了
views資料夾
編譯執行
配置項
修改配置：vue-cli 3+的設計原則是“零配置”，移除（隱藏）配置檔案 build 和 config 等目錄，隱藏到哪裡了?我們如何修改配置？
方法一：在隱藏的資料夾直接修改
node_modules\@vue\cli-service\webpack.config.js 對應的 node_modules\@vue\cli-service\lib\Service.js
方法二： （推薦）
-
根目錄下建立
vue.config.js，包括：常用的輸出路徑名、跟目錄、預處理、devServer配置、pwa、dll、第三方外掛等，詳細配置可以看 官方文件 -
config資料夾已經被移除，但是多了
.env.production和env.development檔案，除了檔案位置，實際配置起來和2.0沒什麼不同
方法三： 命令列vue ui 開啟一個本地服務，開啟視覺化專案管理工具
其他小知識點補充
- 安裝了vue-cli 3.x 後如何使用 vue-cli 2.x 建立專案：需要安裝一個橋接工具
@vue/cli-init, 即可使用vue-cli 2.x對應指令建立專案
npm install -g @vue/cli-init
-
vue-cli3.0+在專案建立最後會有一個儲存當前配置的功能preset（預設）,其實是在create新專案時，生成的外掛配置項預設，也就是在專案中需要用到的外掛安裝成功之後，會生成一個關於preset的檔案，當再次create新專案時，就不需要再去選擇同樣的外掛，直接用預設安裝即可。設定儲存預設時系統會自動生成一個.vuerc的檔案，一般在c盤，可檢視之前做的預設配置