Vue CLI3出了有一段时间了，但是项目上面还是用的Vue CLI2，最近看到小伙伴在研究，于是抽了一个下午加晚上的时间，把vue.config.js这块配置好。项目中用的是Sass，希望是公共的样式提取到一个scss文件中，页面单独的样式就写在vue里面，这样后期维护比较方便。

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const path = require('path')
const resolve = dir => path.join(__dirname, dir)
const isProduction = ['production'].includes(process.env.NODE_ENV)
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i

module.exports = {
  //基本路径
  publicPath: './',//vue-cli3.3+新版本使用
  //输出文件目录
  outputDir: 'public',
  // eslint-loader 是否在保存的时候检查
  lintOnSave: true,
  //放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。
  assetsDir: 'static',
  //以多页模式构建应用程序。
  pages: undefined,
  //是否使用包含运行时编译器的 Vue 构建版本
  runtimeCompiler: false,
  // 默认babel-loader忽略mode_modules，这里可增加例外的依赖包名
  transpileDependencies: [],
  //是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的 CPU 有多于一个内核时自动启用，仅作用于生产构建，在适当的时候开启几个子进程去并发的执行压缩
  parallel: require('os').cpus().length > 1,
  //生产环境是否生成 sourceMap 文件，一般情况不建议打开
  productionSourceMap: isProduction,

  // webpack配置
  //对内部的 webpack 配置进行更细粒度的修改 https://github.com/neutrinojs/webpack-chain see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
  chainWebpack: config => {
    /**
     * 删除懒加载模块的prefetch，降低带宽压力
     * https://cli.vuejs.org/zh/guide/html-and-static-assets.html#prefetch
     * 而且预渲染时生成的prefetch标签是modern版本的，低版本浏览器是不需要的
     */
    //config.plugins.delete('prefetch');
    // 添加别名
    config.resolve.alias.set('@', resolve('src'));
  },
  //调整 webpack 配置 https://cli.vuejs.org/zh/guide/webpack.html#%E7%AE%80%E5%8D%95%E7%9A%84%E9%85%8D%E7%BD%AE%E6%96%B9%E5%BC%8F
  configureWebpack: config => {
    // cdn引用时配置externals
    // config.externals = {
    //     'vue': 'Vue',
    //     'element-ui': 'ELEMENT',
    //     'vue-router': 'VueRouter',
    //     'vuex': 'Vuex',
    //     'axios': 'axios'
    // }
    if (isProduction) {
      const plugins = [];
      // 移除console
      plugins.push(
        new UglifyJsPlugin({
          uglifyOptions: {
            compress: {
              drop_console: true,
              drop_debugger: false,
            }
          },
          sourceMap: process.env.NODE_ENV !== 'production',
          parallel: true
        })
      );
      // gzip压缩
      plugins.push(
        new CompressionWebpackPlugin({
          filename: '[path].gz[query]',
          algorithm: 'gzip',
          test: productionGzipExtensions,
          threshold: 10240,
          minRatio: 0.8
        })
      );
      config.plugins = [...config.plugins, ...plugins];
    } else {
      // config.devtool = 'cheap-module-eval-source-map';
    }
  },
  css: {
    // 启用 CSS modules
    modules: false,
    // 是否使用css分离插件
    extract: isProduction,
    // 开启 CSS source maps，一般不建议开启
    sourceMap: false,
    // css预设器配置项
    loaderOptions: {
      sass: {
        //设置css中引用文件的路径，引入通用使用的scss文件（如包含的@mixin）
        data: `
          @import '@/assets/css/_base.scss';
          @import '@/assets/css/_mixin.scss';
          @import '@/assets/css/_setting.scss';
         `
      },
      // px转换为rem
      // npm install postcss-pxtorem -D
      // postcss: {
      //   plugins: [
      //     require('postcss-pxtorem')({
      //       rootValue: 19.2, // 换算的基数
      //       selectorBlackList: ['edui'], // 忽略转换正则匹配项
      //       propList: ['*']
      //     })
      //   ]
      // }
    }
  },
  // webpack-dev-server 相关配置 https://webpack.js.org/configuration/dev-server/
  devServer: {
    // host: 'localhost',
    host: "0.0.0.0",
    port: 8080, // 端口号
    https: false, // https:{type:Boolean}
    open: true, //配置自动启动浏览器  
    hotOnly: true, // 热更新
    proxy: {
      '/api': {
        target: 'http://xxx.com',
        changeOrigin: true,
        ws: false,
        cookieDomainRewrite: {
          'baidu.com': '127.0.0.1'
        }
      }
    }
  },

  // 第三方插件配置 https://www.npmjs.com/package/vue-cli-plugin-style-resources-loader
  pluginOptions: {

  }
};

代码中已经注释了，需要单独安装compression-webpack-plugin和uglifyjs-webpack-plugin。

另外一点，我是从2升级到3的，升级之后，提示：

You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

原因是需要把main.js中

new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

改为

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')