vue-cli2.x和vue-cli3.x 或者 vue-cli4.x 差異不能說非常大但是簡潔了許多和看起來清爽了許多更方便使用了；准備工作先分析再來實踐
更新到 3.x / 4.x 之后，vue-cli 的包名從 vue-cli 改成了 @vue/cli
官網文檔地址：https://cli.vuejs.org/zh/guide/installation.html
查看其版本：vue -V 或者 vue --version
如果你安裝了舊版本的cil請先移除：
npm uninstall vue-cli -g
# OR
yarn global remove vue-cli
然后重新安裝新版本的 @vue/cli
npm install -g @vue/cli
# OR
yarn global add @vue/cli
1.x 和 2.x 的的 vue-cli 采用 init 命令創建項目
vue init webpack project-name
3.x / 4.x 之后vue-cli 采用 create 命令創建項目
vue create project-name
vue-cli3與vue-cli4的區別：@vue/cli-plugin-pwa、@vue/cli-service等包的增強 ，原來在根目錄下的store.js、router.js被分別放到了對應的文件夾下
webpack的安裝：要安裝最新版本或特定版本，請運行以下命令之一
npm install --save-dev webpack
npm install --save-dev webpack@<version>
如果你使用 webpack 4+ 版本，你還需要安裝 CLI
npm install --save-dev webpack-cli
全局安裝：
npm install --global webpack
npm install --global webpack-cli
查看版本：webpack -v;
/* * @Description: vue.config.js 參考文檔：https://cli.vuejs.org/zh/config/#%E5%85%A8%E5%B1%80-cli-%E9%85%8D%E7%BD%AE * @Version: 2.0 * @Autor: lhl * @Date: 2020-08-26 17:03:04 * @LastEditors: lhl * @LastEditTime: 2020-08-27 10:06:40 */ module.exports = { // 部署應用包時的基本 URL 這個值也可以被設置為空字符串 ('') 或是相對路徑 ('./')，這樣所有的資源都會被鏈接為相對路徑，這樣打出來的包可以被部署在任意路徑
// 把開發服務器架設在根路徑，可以使用一個條件式的值 process.env.NODE_ENV === 'production' ? '/production-sub-path/' : '/'
publicPath: './', // 構建輸出目錄（打包位置）
outputDir: 'dist', // 靜態資源目錄 (js、css、img、fonts) 的 (相對於 outputDir 的) 目錄 -->打包后dist下面的靜態資源文件夾名稱
assetsDir: 'static', // 指定生成的 index.html 的輸出路徑 (相對於 outputDir)。也可以是一個絕對路徑。Default
indexPath: 'index.html', // 是否在開發環境下通過 eslint-loader 在每次保存時 lint 代碼
lintOnSave: process.env.NODE_ENV !== 'production', // 如果你不需要生產環境的 source map，可以將其設置為 false 以加速生產環境構建
productionSourceMap: false, // 如果這個值是一個對象，則會通過 webpack-merge 合並到最終的配置中
// 如果你需要基於環境有條件地配置行為，或者想要直接修改配置，那就換成一個函數 (該函數會在環境變量被設置之后懶執行)。該方法的第一個參數會收到已經解析好的配置。在函數內，你可以直接修改配置，或者返回一個將會被合並的對象
configureWebpack: {}, // 對內部的 webpack 配置（比如修改、增加Loader選項）(鏈式操作)
chainWebpack: () => { }, // css的處理
css: { // 默認情況下，只有 *.module.[ext] 結尾的文件才會被視作 CSS Modules 模塊
requireModuleExtension: true, // 是否將組件中的 CSS 提取至一個獨立的 CSS 文件中,當作為一個庫構建時，你也可以將其設置為 false 免得用戶自己導入 CSS
// 默認生產環境下是 true，開發環境下是 false 是否使用css分離插件 ExtractTextPlugin
extract: false, // 是否為 CSS 開啟 source map。設置為 true 之后可能會影響構建的性能
sourceMap: false, //向 CSS 相關的 loader 傳遞選項(支持 css-loader postcss-loader sass-loader less-loader stylus-loader)
loaderOptions: { css: {}, less: {} } }, // 所有 webpack-dev-server 的選項都支持 更多參考：https://webpack.js.org/configuration/dev-server/
devServer: { host: '0.0.0.0', // 允許外部ip訪問
open: true, //設置自動打開瀏覽器
port: 8989, //設置端口
proxy: { //設置代理
'/api': { target: 'xxx', // 接口的域名
changeOrigin: true, // 如果接口跨域，需要進行這個參數配置
secure: false, // 如果是https接口，需要配置這個參數
pathRewrite: { // 如果接口本身沒有/api需要通過pathRewrite來重寫接口地址
'^/api': '' } } } }, // 向 PWA 插件傳遞選項
pwa: {}, // 第三方插件配置
pluginOptions: { } }
接下來說下環境變量配置（系統變量）和分環境打包命令配置
新建文件：.env.beta 預生產環境
NODE_ENV=beta VUE_APP_TITLE=My App beta(staging) VUE_APP_BASE_URL=https://www.beta.com/
新建文件：.env.development 開發環境
NODE_ENV=development VUE_APP_TITLE=My App development 只有以 VUE_APP_ 開頭的變量會被 webpack.DefinePlugin 靜態嵌入到客戶端側的包中你可以在應用的代碼中這樣訪問它們：console.log(process.env.VUE_APP_SECRET)(staging) VUE_APP_BASE_URL=http://xx.x.xxx.xxx:8080/xxx
新建文件：.env.test 測試環境
NODE_ENV=test VUE_APP_TITLE=My App test (staging) VUE_APP_BASE_URL=https://www.test.com/
新建文件：.env.production 生產環境
NODE_ENV=production VUE_APP_TITLE=My App production (staging) VUE_APP_BASE_URL=https://www.production.com/
package.json文件加上：對應的打包命令
"build-dev": "vue-cli-service build --mode development", "build-test": "vue-cli-service build --mode test", "build-beta": "vue-cli-service build --mode beta", "build-prod": "vue-cli-service build --mode production"