vue 打包设置

1、vue webpack配置

filename: '[path][base].gz',// 设置成这样就行了

const { defineConfig } = require('@vue/cli-service')const debug = process.env.NODE_ENV !== 'production'const CompressionWebpackPlugin = require('compression-webpack-plugin')const TerserPlugin = require("terser-webpack-plugin");
const productionGzipExtensions = ['js', 'css'];module.exports = defineConfig({transpileDependencies: true,})
module.exports = {publicPath: "./",outputDir: `dist/prod`,lintOnSave: false,//是否开启eslint保存检测 ,它的有效值为 true || false || 'error'\devServer: {open: true, //配置自动启动浏览器// host: "192.168.10.18",https: false,// hotOnly: false, //热更新port: 7878,proxy: {},client: {overlay: false,},},// configureWebpack: {//   resolve: {//     alias: {//       '@': path.resolve(__dirname, 'src')//     }//   }// },// chainWebpack: (config) => {//   config.resolve.alias//     .set('@', resolve('src'))//     .set('assets', resolve('src/assets'));// },// css: {//   loaderOptions: {//     postcss: {//       plugins: [//         require("postcss-px2rem-exclude")({//           remUnit: 192, //1920//           // exclude: /node_modules|folder_name/i//         }),//       ],//     },//   },// },productionSourceMap: false,configureWebpack: config => {if (debug) { // 开发环境配置config.devtool = 'source-map'}else{// 开启分离jsconfig.optimization = {runtimeChunk: 'single',splitChunks: {chunks: 'all',  maxInitialRequests: Infinity,minSize: 20000,cacheGroups: {vendor: {test: /[\\/]node_modules[\\/]/, // 提取 node_modules 中的库name: 'vendors',                // 提取到 vendors.jschunks: 'all',// priority: -10,// name (module) {//   const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]//   return `npm.${packageName.replace('@', '')}`// }},},},minimize: true,minimizer: [new TerserPlugin({extractComments: false,//不将注释提取到单独的文件中terserOptions: {compress: {// 移除 warning,console,debugger等warnings:false, drop_console: true,drop_debugger: true,pure_funcs: ['console.log'] // 移除console},output: {// 去掉注释内容comments: false,}}})]};config.plugins.push(new CompressionWebpackPlugin({// filename: '[path].gz[query]',filename: '[path][base].gz',algorithm: 'gzip',test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),threshold: 10240,minRatio: 0.8,}))}},configureWebpack:{module: {rules: [{test: /\.(jpg|png|gif)$/,use: [{loader: 'image-webpack-loader',options: {mozjpeg: {progressive: true,quality: 65},optipng: {enabled: false},pngquant: {quality: [0.65, 0.90],speed: 4},gifsicle: {interlaced: false},webp: {quality: 75}}}]},],},}}

2、nginx 配置访问gz

http {gzip_static on;          # 启用预压缩文件查找brotli_static on;        # 启用 Brotli 预压缩文件（需安装 ngx_brotli 模块）# 若未找到预压缩文件，动态压缩gzip on;gzip_types text/plain text/css application/json application/javascript text/xml;
}