Vue CLI 3 剛出 Beta，和之前的 CLI 2 差別很大，試用了一下記錄一下感受。

最大變化：零配置

CLI 2 需要手動維護 webpack.config.js，檔案又長又難懂。CLI 3 把 webpack 配置完全封裝起來，開箱即用：

npm install -g @vue/cli
vue create my-app
cd my-app
npm run serve

就這樣，完全不需要動 webpack 配置。

配置方式：vue.config.js

如果需要自定義，在專案根目錄建立 vue.config.js：

// vue.config.js
module.exports = {
  // 公共路徑
  publicPath: process.env.NODE_ENV === "production" ? "/my-app/" : "/",

  // 開發伺服器代理
  devServer: {
    proxy: {
      "/api": {
        target: "http://localhost:3000",
        changeOrigin: true,
      },
    },
  },

  // webpack 配置合併
  configureWebpack: {
    plugins: [new MyPlugin()],
  },

  // webpack 鏈式修改
  chainWebpack: (config) => {
    config.plugin("html").tap((args) => {
      args[0].title = "我的應用";
      return args;
    });
  },
};

外掛系統

CLI 3 的一大亮點是外掛化。新增功能不再是手動改配置，而是安裝外掛：

vue add router      # 新增 Vue Router
vue add vuex        # 新增 Vuex
vue add element-ui  # 新增 Element UI
vue add pwa         # 新增 PWA 支援
vue add typescript  # 新增 TypeScript

外掛會自動修改專案結構和配置，不需要手動改。

環境變數

# .env.production
VUE_APP_API_URL=https://api.example.com
VUE_APP_VERSION=1.0.0

在程式碼裡用 process.env.VUE_APP_* 訪問（只有 VUE_APP_ 字首的才會暴露給客戶端）。

GUI 介面

CLI 3 還有一個 Web 介面（!）：

vue ui

開啟瀏覽器，可以在介面裡管理外掛、執行指令碼、檢視構建分析。對不熟悉命令列的人很友好。

和 CLI 2 的遷移

舊專案如果想用 CLI 3，暫時沒有自動遷移工具，建議新專案用 CLI 3。舊專案可以繼續用 CLI 2 維護，等時機成熟再遷移。

小結

• 零配置，webpack 完全封裝，不需要手動維護
• vue.config.js 提供靈活的配置入口
• vue add 外掛命令一鍵整合功能
• GUI 介面是亮點，降低了入門門檻