vue.config.js

const { defineConfig } = require('@vue/cli-service')
const path = require('path')
function resolve(dir) {
  return path.join(__dirname, dir)
}
const CompressionPlugin = require('compression-webpack-plugin')
const name = 'E蓉管理' // page title
module.exports = defineConfig({
  // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
  productionSourceMap: false,
  transpileDependencies: true,
  lintOnSave: false,
  devServer: {
    port: 8032,
    open: true,
    proxy: {
      '/api': {
        // 跨域请求的地址
        target: process.env.VUE_APP_BASE_API + '/api',
        changeOrigin: true, // 是否允许跨域请求，在本地会创建一个虚拟服务端，发送接收请求数据，这样服务端和服务端进行数据的交互就不会有跨域问题
        // 路径重写，替换请求地址
        pathRewrite: {
          '^/api': ''
        }
      }
    },
    client: {
      // webSocketURL: "http://localhost:8080"
      overlay: false
    },
  },
  configureWebpack: {
    name: name,
    resolve: {
      alias: {
        '@': resolve('src'),
        'static': resolve('static') // 增加这一行代码
      }
    },
    plugins: [
      // http://doc.ruoyi.vip/ruoyi-vue/other/faq.html#使用gzip解压缩静态文件
      new CompressionPlugin({
        cache: false,                                  // 不启用文件缓存
        test: /\.(js|css|html|jpe?g|png|gif|svg)?$/i,  // 压缩文件格式
        filename: '[path][base].gz[query]',            // 压缩后的文件名
        algorithm: 'gzip',                             // 使用gzip压缩
        minRatio: 0.8,                                 // 压缩比例，小于 80% 的文件不会被压缩
        deleteOriginalAssets: false                    // 压缩后删除原文件
      })
    ],
  },
  chainWebpack(config) {
    config.externals({
      // 'monaco-editor': 'monaco-editor',
      'echarts': 'echarts'
    })
    // when there are many pages, it will cause too many meaningless requests
    config.plugins.delete('prefetch')
    config.plugin('html')
      .tap(args => {
        args[0].title = name;
        return args;
      })
    // set svg-sprite-loader
    config.module
      .rule('svg')
      .exclude.add(resolve('src/icons'))
      .end()
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('src/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
      .end()
   
  },
  // 在npm run build 或 yarn build 时 ，生成文件的目录名称（要和baseUrl的生产环境路径一致）（默认dist）
  outputDir: 'dist',
  // 用于放置生成的静态资源 (js、css、img、fonts) 的；（项目打包之后，静态资源会放在这个文件夹下）
  assetsDir: 'static',
})