簡述vue-cli 2.x和vue-cli 3+在項目構建、運行、編譯執行時的區別

碼文不易啊，轉載請帶上本文連接呀，感謝感謝 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）

目錄結構

1. vue-cli 3+的項目摒棄了 config 、 build 、 static 目錄，新增了 public 目錄，將根目錄下的 index.html 放置在 public 目錄下。

2. 新增 vue.config.js (需手動建立)配置文件，能夠在該文件中進行webpack的相關配置，例如 loader、開發環境等。

3. 新增.browserslistrc 文件，指定項目的目標瀏覽器的範圍，用來肯定須要轉譯的 JavaScript 特性和須要添加的 CSS 瀏覽器前綴，能夠理解爲瀏覽器兼容。

4. 新增 babel.config.js 替代原先的.babelrc，具有和原先.babelrc同樣的做用。

5. src文件夾中多了 views 文件夾

編譯運行

配置項

修改配置：vue-cli 3+的設計原則是「零配置」，移除（隱藏）配置文件 build 和 config 等目錄，隱藏到哪裏了?咱們如何修改配置？

方法一：在隱藏的文件夾直接修改

node_modules\@vue\cli-service\webpack.config.js 對應的 node_modules\@vue\cli-service\lib\Service.js

方法二： （推薦）

1. 根目錄下建立vue.config.js，包括：經常使用的輸出路徑名、跟目錄、預處理、devServer配置、pwa、dll、第三方插件等，詳細配置能夠看 官方文檔

2. 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盤，可查看以前作的預設配置