1.安装额外需要的依赖

npm i -D style-resources-loader vue-cli-plugin-style-resources-loader compression-webpack-plugin

2.项目根目录新建vue.config.js

const path = require('path')
const CompressionWebpackPlugin = require('compression-webpack-plugin')
let isProduction = process.env.NODE_ENV === 'production'
function resolve (dir) {
  return path.join(__dirname, dir)
}
module.exports = {
  // 根路径
  publicPath: '/',
  // 打包后的文件夹名
  outputDir: './dist',
  // 放置JS、CSS的文件夹名
  assetsDir: 'assets',
  devServer: {
    // 自动开启页面
    open: true,
    // api请求代理
    proxy: {
      '/api': {
        target: 'https://test.api.com.cn/api',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    },
    overlay: {
      warnings: true,
      errors: true
    },
  },
  // 是否在保存的时候检查代码
  lintOnSave: 'error',
  // 配置别名
  chainWebpack: (config) => {
    config.resolve.alias
      .set('@', resolve('src'))
      .set('api', resolve('src/api'))
      .set('views', resolve('src/views'))
  },
  // 无需打包的库
  configureWebpack: config => {
    Object.assign(config, {
      externals: {
        'vue': 'Vue',
        'vue-router': 'VueRouter',
        'vuex': 'Vuex',
        'axios': 'axios',
        'vue-lazyload': 'VueLazyload'
      }
    })
    // 生产环境开启Gzip
    if (isProduction) {
      return {
        plugins: [
          new CompressionWebpackPlugin({
            test: /\.js$|\.html$|\.css/,
            threshold: 10240,
            deleteOriginalAssets: false
          })
        ]
      }
    }
  },
  // 生产环境的source map是否开启
  productionSourceMap: false,
  css: {
    sourceMap: true,
    loaderOptions: {
    }
  },
  pluginOptions: {
    // 全局注册scss变量
    'style-resources-loader': {
      preProcessor: 'scss',
      patterns: [
        path.resolve(__dirname, './src/assets/css/mixin.scss'),
        path.resolve(__dirname, './src/assets/css/variables.scss')
      ]
    }
  }
}