vue-cli3.x版本 vue.config.js配置

案例项目目录：

const fs = require("fs"); //操作本地文件，多用于构建多项目，按需引入 
const path = require("path");
const CopyWebpackPlugin = require("copy-webpack-plugin"); //copy静态文件，按需引入
const CompressionPlugin = require('compression-webpack-plugin');  // 开启gzip压缩， 按需引入
const productionGzipExtensions = /\\.(js|css|json|txt|html|ico|svg)(\\?.\*)?$/i; // 开启gzip压缩， 按需写入

let pagesMap = {};
// let NODE = process.env.NODE_ENV;
let SITE = process.env.VUE_APP_SITE || "production";

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

if (SITE === "htmls") {
  multipageFn();
} else if (SITE === "web") {
  singlepageFn();
} else if (SITE === "manager") {
  singlepageFn("manager");
}

/**
 * 多页面项目（例子1）
 * entry:"",template:"",filename:"" 等;
 * */
function multipageFn() {
  let filesList = resolve(`./src/views/${SITE}`);
  if (fs.existsSync(filesList)) {
    let files = fs.readdirSync(filesList);
    files.forEach(name => {
      pagesMap[name] = {
        entry: `./src/views/${SITE}/${name}/main.js`, //入口文件，路径根据实际情况而定
        template: `./src/views/${SITE}/${name}/index.html`,
        filename: `${name}.html`,
        title: process.env.VUE_APP_TITLE||SITE //页面title
      };
    });
  }
}
/**
 * 单页页面项目（例子2）
 * */
function singlepageFn(path='index') {
  pagesMap = {
    index: {
      entry: `./src/views/${SITE}/main.js`,//入口文件，路径根据实际情况而定
      template: `./public/${path}.html`,
      filename: `index.html`,
      title: process.env.VUE_APP_TITLE||SITE //页面title
    }
  };
}

module.exports = {
  // 配置 webpack-dev-server 行为。
  devServer: {
    open: false, //告诉dev-server在服务器启动后打开浏览器 boolean = false string object
    port: 8080, //指定端口号
    host: "0.0.0.0", //指定要使用的主机
    https: false, //默认情况下，将通过HTTP为dev-server提供服务
    hotOnly: false, //启用热模块替换
    proxy: { //还可配置多个跨域
      // 代理跨域
      "/api": {
        target: "XXXXXXX", //代理的接口地址
        changeOrigin: true,
        secure: false,
        pathRewrite: {
          "^/api": ""
        }
      }
    }
  },
  assetsDir: "static",//存放打包后的文件夹
  publicPath: "/", //string = '/'默认捆绑的文件将在此路径下的浏览器中可用(老版本 baseUrl: "",)
  outputDir: `dist/${SITE}`, // 输出文件目录
  lintOnSave: false, // eslint-loader 是否在保存的时候检查
  filenameHashing: true, // 默认在生成的静态资源文件名中包含hash以控制缓存
  productionSourceMap: false, //是否生成对应map文件（未被压缩加密的代码），设置为 false 以加速生产环境构建
  // 如果你需要基于环境有条件地配置行为，或者想要直接修改配置，那就换成一个函数 (该函数会在环境变量被设置之后懒执行)。该方法的第一个参数会收到已经解析好的配置。在函数内，你可以直接修改配置，或者返回一个将会被合并的对象
  configureWebpack: {
    //cdn引入时需配置
    externals:{
      'vue': 'Vue',
      'vuex': 'Vuex',
      'vue-router': 'VueRouter',
      "element-ui": "Element"
    },
    plugins: [
      new CopyWebpackPlugin({ //打包时执行拷贝
        patterns:[{
          from: "./static",//要copy的静态文件资源
          to: 'static'
        }]
      }),
      //压缩
      new CompressionWebpackPlugin({
            filename: "[path].gz[query]",
            algorithm: "gzip",
            test: productionGzipExtensions,
            threshold: 10240,
            minRatio: 0.8
        })
    ]
  },
  // webpack配置
  // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
  chainWebpack: ( ) => {
    // 对内部的 webpack 配置（比如修改、增加Loader选项）(链式操作)
  },
  css: {
    // css的处理
    // 是否将组件中的 CSS 提取至一个独立的 CSS 文件中,当作为一个库构建时，你也可以将其设置为 false 免得用户自己导入 CSS
    // 默认生产环境下是 true，开发环境下是 false
    extract: true,
    sourceMap: false, //是有开启css source map(为 true 之后可能会影响构建的性能)
    loaderOptions: {
      //向 CSS 相关的 loader 传递选项(支持 css-loader postcss-loader sass-loader less-loader stylus-loader)
      css: {},
      less: {},
      postcss: {
        plugins: SITE!=="manager"?[
          require('postcss-px2rem-exclude')({ // 把px单位换算成rem单位
            rootValue: 75, // 换算的基数(设计图750的根字体为75)
            // selectorBlackList: ['weui', 'mu'], // 忽略转换正则匹配项
            propList: ["*"]
          })
        ]:[]
      }
    }
  },
  //pages: { // 构建多页面应用，页面的配置
  // index: {
  //     entry: "./src/index/main.js", //入口文件
  //     template: "./src/index/index.hrml", //模板文件
  //     filename: "index.html", //输出的文件名称
  //     // 当使用 title 选项时，template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
  //     title: 'Index Page'
  // }
  //},
  pages: pagesMap,
  // PWA 插件相关配置
  // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
  pwa: {},
  // 第三方插件配置
  pluginOptions: {
    // ...
  }
}

以上是自己平常项目中常用的配置，如有需要改进的地方还请大神们指点；
参考vue.config.js配置