1. 配置文件vite.config.ts
//**关键1**
import viteCompression from 'vite-plugin-compression'
//**关键1**
export default defineConfig({
base: "/issue/",
plugins: [
vue(),
//**关键2 viteCompression 大于10KB进行压缩,在dist文件夹中可以看到带.gz后缀的文件
**
viteCompression({
threshold: 10*1024
}),
//**关键2**
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
PurgeIcons({
/* PurgeIcons Options */
}),
],
css: {
//css预处理
preprocessorOptions: {
scss: {
additionalData: '@import "./src/styles/tooltipWidth.scss";',
charset: false,
},
less: {
charset: false,
additionalData: '@import "./src/styles/global.less";',
},
},
},
//**关键3**
build: {
minify: 'terser',
terserOptions: {
compress: {
drop_console: true, //打包时删除console
drop_debugger: true, //打包时删除 debugger
pure_funcs: ['console.log'],//指定只删除console.log,其他console开头的命令保留
},
output: {
comments: true, // 去掉注释内容
},
},
},
//**关键3**
resolve: {
alias: [
{
find: "@/",
replacement: path.resolve(process.cwd(), "src") + "/",
},
],
},
server: {
// 是否自动打开浏览器
open: true,
// 服务器主机名,如果允许外部访问,可设置为"0.0.0.0"
host: "0.0.0.0",
// 服务器端口号
port: 3000,
middlewareMode: "html",
// 代理
proxy: {
"/issue/apigateway": {
target: `${base_url}`,
changeOrigin: true,
rewrite: (path) => path.replace(/^\/issue\/apigateway/, ""),
},
"/roadtest/apigateway": {
target: `${base_url}`,
changeOrigin: true,
rewrite: (path) => path.replace(/^\/roadtest\/apigateway/, ""),
},
"/apigateway": {
target: `${base_url}`,
changeOrigin: true,
rewrite: (path) => path.replace(/^\/apigateway/, ""),
},
'/gateway': {
target: `${base_url}`,
changeOrigin: true,
rewrite: (path) => path.replace(/^\/gateway/, '')
},
"/api": {
target: `${base_url}`,
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ""),
},
"/local": {
target:'http://1111.111.1:22034/',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/local/, ""),
},
},
},
});
2. 先安装依赖库npm i vite-plugin-compression -D
3. server/index.js
const jsRex = /\.(js|css)$/
if (jsRex.test(ctx.request.url)) {
let filePath = path.join(__dirname, './dist'+ctx.request.url)
if(fs.existsSync(filePath+'.gz')){
ctx.set('Content-Encoding', 'gzip')
}
ctx.set('expires', new Date(Date.now() + 4 * 60 * 1000).toGMTString())
ctx.set('cache-control', 'max-age=' + 60 * 60 * 4)
}
加上面的代码,主要是为了判断当前请求的的js、css,是否有相应的gz后缀的文件,如果有的话,在头部加上content-encoding=gzip,会获取相应的gz文件,浏览器会自己解析压缩的文件,如果不存在gz,就走正常的请求