随笔-记录一下项目中vue.config.js文件配置

const path = require("path");
const fs = require("fs");

const resolve = dir => {
  return path.join(__dirname, dir);
};

const env =
  process.env.NODE_ENV === "development"
    ? "development"
    : process.env.VUE_APP_TITLE === "alpha"
    ? "alpha"
    : "production";
fs.writeFileSync(
  path.join(__dirname, "./config/env.js"),
  `export default '${env}'`
);

const BASE_URL = "/";

module.exports = {
  publicPath: BASE_URL,

  // 打包的目录
  outputDir: "dist",

  // 在保存时校验格式
  lintOnSave: true,

  // 生产环境是否生成 SourceMap
  productionSourceMap: false,

  devServer: {
    open: true, // 启动服务后是否打开浏览器
    host: "zhanglei.com",
    port: 8080, // 服务端口
    https: false,
    hotOnly: false,
    proxy: {
      "/api": {
        target: "http://test-api.xxx.com",
        changeOrigin: true,
        pathRewrite: {
          "^/api": "/"
        }
      }
    } // 设置代理
  },

  pluginOptions: {
    "style-resources-loader": {
      preProcessor: "less",
      patterns: [path.resolve(__dirname, "./src/assets/css/variable.less")]
    }
  },
  chainWebpack: config => {
    config.plugins.delete("prefetch");
    config.resolve.alias
      .set("@", resolve("src")) // key,value自行定义，比如.set('@@', resolve('src/components'))
      .set("_c", resolve("src/components"))
      .set("_request", resolve("src/request"))
      .set("_conf", resolve("config"));
    config.module
      .rule("vue")
      .use("vue-loader")
      .tap(options => {
        options.compilerOptions.directives = {
          // 重写v-html指令，xss攻击
          // html(node, directiveMeta) {
          //   (node.props || (node.props = [])).push({
          //     name: "innerHTML",
          //     value: `xss(_s(${directiveMeta.value}))`
          //   });
          // }
        };
        return options;
      });
  },
  // webpack配置
  configureWebpack: {
    performance: {
      hints: "warning",
      // 入口起点的最大体积
      maxEntrypointSize: 50000000,
      // 生成文件的最大体积
      maxAssetSize: 30000000,
      // 只给出 js 文件的性能提示
      assetFilter: function(assetFilename) {
        return assetFilename.endsWith(".js");
      }
    },
    plugins: []
  }
};