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

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等包的增強 ，原來在根目錄下的vuex.js、route.js被分別放到了對應的資料夾下

webpack的安裝：要安裝最新版本或特定版本，請執行以下命令之一

全域性安裝：
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"