首先在 vue 的項(xiàng)目下面 新建一個(gè) vue.config.js 該文件夾和src是同級(jí)的文件夾。

文件夾的內(nèi)容如下

module.exports = {
  publicPath: "./", // 部署應(yīng)?包時(shí)的基本 URL
  outputDir: "dist", // npm run build ?成的?件夾尤莺，默認(rèn)是dist
  assetsDir: "static", // 在kaixin?件夾下??成static?錄存放js,img,css等靜態(tài)資源
  indexPath: "index.html", // ?成的單?件的莺琳，?件名罚攀，
  filenameHashing: true, // 文件名哈希（默認(rèn)情況下肋层，生成的靜態(tài)資源在它們的文件名中包含了 hash 以便更好的控制緩存。然而，這也要求 index 的 HTML 是被 Vue CLI 自動(dòng)生成的齐媒。如果你無(wú)法使用 Vue CLI 生成的 index HTML，你可以通過(guò)將這個(gè)選項(xiàng)設(shè)為 false 來(lái)關(guān)閉文件名哈希）
  pages: {
    open: true, // 是否直接在瀏覽器打開(kāi)纷跛。
    index: {
      // page 的入口文件
      entry: 'src/index/main.js',
      // 模板文件
      template: 'public/index.html',
      // 在 dist/index.html 的輸入文件
      filename: 'index.html',
      // 當(dāng)使用頁(yè)面 title 選項(xiàng)時(shí)喻括，
      // template 中的 title 標(biāo)簽需要的是 <title><%= htmlWebpackPlugin.options.title %></title>
      title: 'Index Page',
      // 在這個(gè)頁(yè)面中包含的塊，默認(rèn)情況下會(huì)包含
      // 提取出來(lái)的通用 chunk 和 vandor chunk贫奠。
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    },
    // 當(dāng)使用只有入口的字符串格式時(shí)唬血，
    // 模板文件默認(rèn)是 'public/subpage.html'
    // 如果不存在，就回退到 'public/index.html'
    // 輸出文件默認(rèn)是 'subpage.html'
    subpage: 'src/subpage/main.js'
  },
  // 是否在保存的時(shí)候使用'eslint-loaer'進(jìn)行檢查叮阅。
  lintOnSave: true,
  // 是否使用帶有瀏覽器內(nèi)編譯器的完整構(gòu)建版本
  runtimeCompiler: false,
  // 在生成的 HTML 中的 <link rel="stylesheet"> 和 <script> 標(biāo)簽上啟用 Subresource Integrity (SRI)刁品。如果你構(gòu)建后的文件是部署在 CDN 上的，啟用該選項(xiàng)可以提供額外的安全性浩姥。
  integrity: true,
  // 配置跨域服務(wù)代理
  devServer: {
    host: "127.0.0.1", // 配置主機(jī)地址
    port: process.env.NODE_ENV == 'production' ? 3000 : 8888, // 配置運(yùn)?的端?
    // proxy: "接?地址",  跨域代理！ 【重要状您！】
    proxy: { // 配置多個(gè)勒叠！
      // '/api': {
      //   target: 'http://localhost:3030/api',
      //   ws: true, // 跨域地址是https協(xié)議！
      //   changeOrigin: true,
      //   pathRewrite: {
      //     "^/api": ""   // 將 '/api' 替換成 ''  
      //   }
      // }
    },
  },
  css: {
    // 將組件內(nèi)的 CSS 提取到一個(gè)單獨(dú)的 CSS 文件 (只用在生產(chǎn)環(huán)境中)
    // 也可以是一個(gè)傳遞給 `extract-text-webpack-plugin` 的選項(xiàng)對(duì)象
    extract: true,
    // 是否開(kāi)啟 CSS source map膏孟？
    sourceMap: false,
    // 為預(yù)處理器的 loader 傳遞自定義選項(xiàng)眯分。比如傳遞給
    // Css-loader 時(shí)，使用 `{ Css: { ... } }`柒桑。
    loaderOptions: {
      css: {
        // 這里的選項(xiàng)會(huì)傳遞給 css-loader
      },
      postcss: {
        // 這里的選項(xiàng)會(huì)傳遞給 postcss-loader
      }
    },
    // 為所有的 CSS 及其預(yù)處理文件開(kāi)啟 CSS Modules弊决。
    // 這個(gè)選項(xiàng)不會(huì)影響 `*.vue` 文件。
    modules: false
  },
}