Vue Cli 3：vue.config.js配置文件

 

Vue Cli 3生成的項目結構，沒有build、config目錄，而是使用vue.config.js來進行配置。

 

vue.config.js 是一個可選的配置文件，若是項目的 (和 package.json 同級的) 根目錄中存在這個文件，那麼它會被 @vue/cli-service 自動加載。

你也能夠使用 package.json 中的 vue 字段，可是注意這種寫法須要你嚴格遵守 JSON 的格式來寫。

 

一 查看Vue Cli版本

 

vue --version

3.5.1

 

二 建立vue.config.js配置文件

 

module.exports = {
  // baseUrl從 Vue CLI 3.3 起已棄用，請使用publicPath
  // 默認狀況下，Vue CLI 會假設你的應用是被部署在一個域名的根路徑上，例如 https://www.my-app.com/。
  // 若是應用被部署在一個子路徑上，你就須要用這個選項指定這個子路徑。例如，若是你的應用被部署在 https://www.my-app.com/my-app/，則設置 publicPath 爲 /my-app/。
  publicPath:
    process.env.NODE_ENV === "production" ? "/production-sub-path/" : "/",
  // 當運行 vue-cli-service build 時生成的生產環境構建文件的目錄。
  // 注意目標目錄在構建以前會被清除 (構建時傳入 --no-clean 可關閉該行爲)。
  // 默認值'dist'
  outputDir: "my-app",
  // 放置生成的靜態資源 (js、css、img、fonts) 的目錄(相對於outputDir目錄)。
  // 默認值''
  assetsDir: "assets",
  //指定生成的 index.html 的輸出路徑 (相對於 outputDir)。也能夠是一個絕對路徑。
  // 默認值'index.html'
  indexPath: "myIndex.html",
  // 默認狀況下，生成的靜態資源在它們的文件名中包含了 hash 以便更好的控制緩存。
  filenameHashing: false,
  // 是否在開發環境下經過 eslint-loader 在每次保存時 lint 代碼。這個值會在 @vue/cli-plugin-eslint 被安裝以後生效。
  lintOnSave: process.env.NODE_ENV !== "production",

  //是否使用包含運行時編譯器的 Vue 構建版本。設置爲 true 後你就能夠在 Vue 組件中使用 template 選項了，可是這會讓你的應用額外增長 10kb 左右。
  runtimeCompiler: false,

  // 若是你不須要生產環境的 source map，能夠將其設置爲 false 以加速生產環境構建。
  productionSourceMap: false,

  // 全部 webpack-dev-server 的選項都支持。
  devServer: {
    host: "localhost",
    port: 8080, // 端口號
    https: false,
    open: true, //配置自動啓動瀏覽器

    // 配置多個代理
    proxy: {
      "/api": {
        target: "http://localhost:3000", // 本地模擬數據服務器
        changeOrigin: true,
        pathRewrite: {
          "^/api": "" // 去掉接口地址中的api字符串
        }
      },
      "/foo": {
        target: "http://localhost:8080", // 本地模擬數據服務器
        changeOrigin: true,
        pathRewrite: {
          "^/foo": "" // 去掉接口地址中的foo字符串
        }
      }
    }
  }
};