Vue CLI 3.x 腳手架

什麼是Vue-CLI

Vue-CLI 是 VUE 官方提供，用來搭建專案腳手架的工具，他是vue.js標準的工具，他已經集成了，webpack，內建了好多常用的配置，使我們在使用 Vue 開發專案的時候更加標準化。

安裝：

npm install -g @vue/cli

使用命令來檢視版本

vue --version

通過腳手架創建出來的專案結構

通過腳手架建立專案請看這裡：https://blog.csdn.net/weixin_42776111/article/details/107875228

自定義配置

常用基本配置：https://cli.vuejs.org/zh/config/#vue-config-js

在專案根目錄下建立 vue.config.js 檔案。

vue.config.js 是一個可選的配置檔案，如果專案的 (和 package.json 同級的) 根目錄中存在這個檔案，那麼它會被 @vue/cli-service 自動載入。嚴格遵照 JSON 的格式來寫。

這個檔案應該匯出一個包含了選項的物件：

 // vue.config.js
module.exports = {
  // 選項...
}

常見基礎配置：

// vue.config.js
module.exports = {
    // 部署應用包時的基本 URL.預設情況下，Vue CLI 會假設你的應用是被部署在一個域名的根路徑上，例如 https://www.my-app.com/。如果應用被部署在一個子路徑上，你就需要用這個選項指定這個子路徑。例如，如果你的應用被部署在 https://www.my-app.com/my-app/，則設定 publicPath 為 /my-app/。
    // publicPath: '/'  

    devServer: {
        port: 8001,  // 埠，如果埠被佔用紫紅提升1
        open: true,  // 啟動服務後自動開啟瀏覽器
        https: false, // 協議
        host: 'localhost' // 主機名，也可以是127.0.0.1，或者真機測試的時候0.0.0.0
    },

    lintOnSave: false, // 預設為true，警告僅僅會被輸出到命令列，且不會使得編譯失敗。
    outoutDir: 'dist2', // 預設是dist，存放打包檔案的目錄
    assetsDir: 'assets', // 存放生產的靜態資原始檔

    indexPath: 'out/index.html', // 預設為index.html，指定生成的index.html為輸出路徑

    productionSourceMap: false,  // 打包時，不生成.map檔案，加快打包

  }