mgrading/vue.config.js

const path = require('path')

// let targetUrl = 'http://admin.dayaedu.com'
let targetUrl = 'http://192.168.3.28:8000/'
// let targetUrl = 'http://192.168.3.27:8000' // 箭河
// let targetUrl = 'http://192.168.3.48:8000'
// let targetUrl = 'http://testadm.dayaedu.com/'
// let targetUrl = 'https://mstuonline.dayaedu.com'
// let version = '1.0.0'
// webpack.prod.conf.js
// const Version = new Date().getTime();
// const Version = 20191227;
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['js', 'css']

function resolve (dir) {
  return path.join(__dirname, './', dir)
}
module.exports = {
  publicPath: './',
  // outputDir: 'dist',
  // assetsDir: 'static',
  // outputDir: 'dist',
  // 调整内部的 webpack 配置。
  // 查阅 https://github.com/vuejs/vue-doc-zh-cn/vue-cli/webpack.md
  // chainWebpack: () => {},
  // transpileDependencies: ['webpack-dev-server/client'],
  chainWebpack: config => {
    config.devtool('inline-source-map')
    config.output.filename('[name].[hash].js').end();

    // const svgRule = config.module.rule('svg')
    // // 清除已有的所有 loader,如果你不这样做，接下来的 loader 会附加在该规则现有的 loader 之后。
    // svgRule.uses.clear()
    // // 添加要替换的 loader
    // svgRule.use('svg-sprite-loader').loader('svg-sprite-loader')
    // .options({
    //     symbolId: 'icon-[name]'
    // })
    // svg rule loader
    const svgRule = config.module.rule('svg') // 找到svg-loader
    svgRule.uses.clear() // 清除已有的loader, 如果不这样做会添加在此loader之后
    svgRule.exclude.add(/node_modules/) // 正则匹配排除node_modules目录
    svgRule // 添加svg新的loader处理
      .test(/\.svg$/)
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })

    // 修改images loader 添加svg处理
    const imagesRule = config.module.rule('images')
    imagesRule.exclude.add(resolve('src/icons'))
    config.module
      .rule('images')
      .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)


    config.plugin('html').tap(args => {
      args[0].minify = {
        removeAttributeQuotes: false
      }
      return args
    })
  },
  // eslint-loader 是否在保存的时候检查
  lintOnSave: true,

  // 是否使用包含运行时编译器的Vue核心的构建
  runtimeCompiler: false,
  // 生产环境 sourceMap
  productionSourceMap: false,
  // productionGzip: true,
  configureWebpack: (config) => { 
    // process.env.NODE_ENV === 'production'
    // 生产环境
    config.plugins.push(
      new CompressionWebpackPlugin({
        filename: '[path].gz[query]', // 提示示compression-webpack-plugin@3.0.0的话asset改为filename
        algorithm: 'gzip',
        test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
        threshold: 10240,
        minRatio: 0.8
      })
    )
  },
  // 配置 webpack-dev-server 行为。
  devServer: {
    open: process.platform === 'darwin',
    host: '0.0.0.0',
    port: 9002,
    https: false,
    hotOnly: false,
    // 查阅 https://github.com/vuejs/vue-doc-zh-cn/vue-cli/cli-service.md#配置代理
    proxy: {
      '/contracts': {
        target: targetUrl,
        changeOrigin: true,
        ws: true,
        '^/contracts': '/contracts',
        xfwd: true
      },
      '/student-server': {
        target: targetUrl,
        changeOrigin: true,
        ws: true,
        '^/student-server': '/student-server',
        xfwd: true
      },
      '/api-cms': {
        target: targetUrl,
        changeOrigin: true,
        ws: true,
        '^/api-cms': '/api-cms',
        xfwd: true
      },
      '/api-student': {
        target: targetUrl,
        changeOrigin: true,
        ws: true,
        '^/api-student': '/api-student',
        xfwd: true
      },
      '/api-auth': {
        target: targetUrl,
        changeOrigin: true,
        ws: true,
        '^/api-auth': '/api-auth',
        xfwd: true
      },
      '/musicGroup': {
        target: targetUrl,
        changeOrigin: true,
        ws: true,
        '^/musicGroup': '/musicGroup',
        xfwd: true
      }
    }, // string | Object
  },
  css: {
    loaderOptions: {
      less: {
        modifyVars: {
          // red: '#03a9f4',
          blue: '#14928A',
          // orange: '#f08d49',
          // 'text-color': '#111'
        }
      }
    }
  },
}