vue_ts_large_scale/vue.config.js

const { defineConfig } = require('@vue/cli-service');
const CompressionPlugin = require('compression-webpack-plugin');
const WebpackBar = require('webpackbar');

module.exports = defineConfig({
	transpileDependencies: true,
	publicPath: process.env.NODE_ENV === 'production' ? './' : './',
	productionSourceMap: false, // 不生成map文件-优化打包
	// 生产环境，开启js\css压缩--- 打包优化
	chainWebpack: config => {
		if (process.env.NODE_ENV === 'production') {
			config.plugin('compressionPlugin').use(
				new CompressionPlugin({
					test: /\.(js|css|less|map)$/, // 匹配文件名
					threshold: 1024, // 对超过10k的数据压缩
					minRatio: 0.8,
				}),
			);
		}
	},
	// 代理设置
	devServer: {
		port: 6367,
		open: true,
		https: false,
		proxy: {
			'/api': {
				target: process.env.VUE_APP_URL,
				changeOrigin: true,
				pathRewrite: { '^/api': '/api' },
			},
			'/mock': {
				target: process.env.VUE_APP_URL,
				changeOrigin: true,
				pathRewrite: { '^/mock': '' },
			},
		},
	},
	configureWebpack: {
		plugins: [
			// 设置进度条颜色
			new WebpackBar({ color: '#F6DCE0', profile: true }),
		],
	},
});