Vue3.0的vue.config.js配置

module.exports = {
  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 中的文件
  productionSourceMap: false, //Default: true, 如果你不需要生產環境的 source map，可以將其設置爲 false 以加速生產環境構建。
  // crossorigin: undefined, //Default: undefined, 設置生成的 HTML 中 <link rel="stylesheet"> 和 <script> 標籤的 crossorigin 屬性。
  // integrity: false, //Default: false,在生成的 HTML 中的 <link rel="stylesheet"> 和 <script> 標籤上啓用 Subresource Integrity
	configureWebpack:{
		devServer:{
			before(app){//相當於搭建了一個小型的服務器
				app.get("/api/getUsers",function (req,res) {
					res.json({
						code:"S",
						data:[{id:1,name:"bob",age:23},{id:2,name:"jack",age:24}]
					})
				})
				app.post("/api/setUsers",function (req,res) {
					res.json({
						code:200,
						msg:"修改成功"
					})
				})
			}
		}
	},//Type: Object | Function ;修改最終的配置，可以模擬服務器接口
  // chainWebpack:function(){},//允許對內部的 webpack 配置進行更細粒度的修改。
  css: {
    modules: false, //Default: false, 設置爲 true 後你就可以去掉文件名中的 .module 並將所有的 *.(css|scss|sass|less|styl(us)?) 文件視爲 CSS Modules 模塊。
    sourceMap: false //Default: false, 是否爲 CSS 開啓 source map。設置爲 true 之後可能會影響構建的性能。
    // extract: false, //Default: 生產環境下是 true，開發環境下是 false.是否將組件中的 CSS 提取至一個獨立的 CSS 文件中
    // loaderOptions: {} //Default: {}, 向 CSS 相關的 loader 傳遞選項
  },
  chainWebpack: config => {
    config.resolve.alias
      .set("@", resolve("src"))
      .set("@v", resolve("src/views"))
      .set("@c", resolve("src/components")); /* 別名配置 */
    config.optimization.runtimeChunk("single");
  },
  devServer: {
        overlay:{   //去除eslint報警告
            warning:false,
            error:true
        },
        open: true,//啓動默認瀏覽器打開
        host: "127.0.0.1",
        port: 8080,
        https: false,
        proxy: {//配置跨域
            '/api': {
                target: 'http://api.xxx.com/api/',//接口地址
                ws: true,
                changOrigin: true,//允許跨域
                secure: false,//是否支持https
                pathRewrite: {
                    '^/api': '' // /api表示http://xxx.com/api/
                }
            }
            
        }
    },

  // parallel: require("os").cpus().length > 1, //Default: require('os').cpus().length > 1, 是否爲 Babel 或 TypeScript 使用 thread-loader
  // pwa:{},//向 PWA 插件傳遞選項
  pluginOptions: {},//可以用來傳遞任何第三方插件選項
};

常用配置

baseUrl: "./", //防止打包後，文件找不到
assetsDir: "static",//把打包文件放到static文件夾內
productionSourceMap: false,//加速生產環境構建，減小打包後包體積
devServer：{proxy:'http://api.test.com'} //根據個人需要配置該項

vue.config.js常用配置示例

module.exports = {
    //根據屏幕大小自動縮放適配
    css: {
        loaderOptions: {
            css: {
                // options here will be passed to css-loader
            },
            postcss: {
                // options here will be passed to postcss-loader
                plugins: [require('postcss-px2rem')({
                    remUnit: 192,  //屏幕適配
                })]
            }
        }
    },
    
    lintOnSave:false, //取消eslint檢測
    productionSourceMap: false,  //設爲false可減小打包後包體積，默認爲true
    publicPath: '/cm/',  //配置域名根路徑，從localhost/#/配置後成localhost/cm#/，注意路由應使用hash 
    devServer: {
        overlay:{
            warning:false,
            error:true
        },
        host: '0.0.0.0',
        port: 8060,  
        // open: true,  //自動打開瀏覽器
    },
    assetsDir: "static"  //設置打包後靜態資源放在static文件夾裏
}