vue項目打包文件配置（vue-clli3）

練手項目完結打包的時候遇到一些問題，特此記錄

先貼我的vue.config.js文件的代碼（vue-cli3構建的項目默認是沒有此文件的，需手動添加）更多詳細配置參考官方配置文檔，我的項目不大不小，這些配置貌似就夠了

module.exports = {

  // webpack配置，此處是因為我的項目打包時報錯（WARNING in asset size limit: The following asset(s) exceed the recommended size limit ，因此有了這個webpack配置，若不存在靜態資源過大，可不要這部分代碼）
  configureWebpack: {
    // 警告 webpack 的性能提示
    performance: {
      hints: 'warning',
      // 入口起點的最大體積
      maxEntrypointSize: 50000000,
      // 生成文件的最大體積
      maxAssetSize: 30000000,
      // 只給出 js 文件的性能提示
      assetFilter: function (assetFilename) {
        return assetFilename.endsWith('.js');
      }
    }
  },
  baseUrl: './',
  // 1.默認為 "/":部署在一個域名的根路徑上 ; 2. "./":所有的資源都會被鏈接為相對路徑，這樣打出來的包可以被部署在任意路徑
  outputDir: 'dist',
  // 默認為 "dist",指打包后的資源放置的路徑，放在dist文件夾下
  assetsDir: 'static',
  // 默認為:'' ,放置打包后生成的靜態資源 (js、css、img、fonts) 的 (相對於 outputDir 的) 目錄。
  indexPath: 'index.html',
  // Default: 'index.html' ,指定生成的 index.html 的輸出路徑 (相對於 outputDir)
  filenameHashing: true,
  // Default: true ,生成的靜態資源在它們的文件名中包含了 hash 以便更好的控制緩存
  // pages:undefined,//在 multi-page 模式下構建應用
  lintOnSave: true,
  // Type: boolean|'error';Default: true; true:將 lint 錯誤輸出為編譯警告;'error':錯誤輸出會導致編譯失敗
  runtimeCompiler: false,
  // Default: false, 設置為 true 后你就可以在 Vue 組件中使用 template 選項了，但是這會讓你的應用額外增加 10kb 左右
  // transpileDependencies:[],//Default: [], 默認情況下 babel-loader 會忽略所有 node_modules 中的文件
  css: {
    modules: false,
    // Default: false, 設置為 true 后你就可以去掉文件名中的 .module 並將所有的 *.(css|scss|sass|less|styl(us)?) 文件視為 CSS Modules 模塊。
    sourceMap: false // Default: false, 是否為 CSS 開啟 source map。設置為 true 之后可能會影響構建的性能。
  },
  // productionSourceMap：{ type:Bollean,default:true } 生產源映射
  // 如果您不需要生產時的源映射，那么將此設置為false可以加速生產構建
  productionSourceMap: false,
  // devServer:{type:Object} 3個屬性host,port,https

  // 以下為跨域配置（跨域是在開發時用到的，項目打包后是不需要配置跨域的），簡單介紹下這里跨域配置的意思，我在本地開發的時候地址為localhost:8088,但是服務器的端口為localhost:80,要訪問服務器的上的數據，就要跨域。將‘/MVS’代理為服務器的地址
  devServer: {
    port: 8088, // 端口號
    host: 'localhost',
    https: false, // https:{type:Boolean}
    open: true, // 配置自動啟動瀏覽器
     // 配置跨域處理,只有一個代理
    proxy: {
      '/MVS': {
        target: 'http://127.0.0.1:80/',
        ws: false, //為true會讓websocket默認連接
        changeOrigin: true,
        pathRewrite: {
          '^/MVS': '/MVS' // 重寫接口訪問
        }
      },
      '/foo': {
        target: '<other_url>'
      }
    } // 配置多個代理
  }
};

然后記錄下遇到的問題：

首先是打包警告：WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB)

出現這個問題后，啟動服務器，訪問localhost時頁面出不來，

解決辦法是加入那部分webpack配置代碼

然后第二個問題是：

Failed to load resource: the server responded with a status of 404 (Not Found)
解決辦法是加baseURL配置就行了

baseUrl: './',
要注意的是，baseURL配置和publicPath的配置會沖突，如果兩者都存在會直接忽略baseURL，因此我直接刪除了publicPath的配置