1.1 先安装 compression-webpack-plugin 插件：npm install compression-webpack-plugin --save-dev

1.2 在 vue.config.js 中开启压缩插件(项目下没有此文件可以在根目录下创建):

const CompressionWebpackPlugin = require('compression-webpack-plugin');module.exports = defineConfig({ transpileDependencies: true, configureWebpack: config => { config.externals = {} if (process.env.NODE_ENV === 'production') { return { plugins: [new CompressionWebpackPlugin({ test: /.js$|.html$|.css/, // 压缩文件的后缀 threshold: 1024, // 对超过 1k 的文件进行压缩 deleteOriginalAssets: true, // 不需要保留压缩前文件 })] } } }})

1.3 运行 npm run build 打包项目，打包后打开打包产物目录，可以看到文件后缀有 .gz

注意：开启公共读后，任何人均能访问你桶内的数据！！强烈建议这个桶仅用作静态网站托管，不要存放隐私数据

注意：开启公共读后，任何人均能访问你桶内的数据！！强烈建议这个桶仅用作静态网站托管，不要存放隐私数据

注意：开启公共读后，任何人均能访问你桶内的数据！！强烈建议这个桶仅用作静态网站托管，不要存放隐私数据

创建后点击桶名，进入桶配置，点击静态网站托管，配置静态网站

这个网址即是网站地址

进入 DWR 服务控制台，点击创建工作流

重新在 Vue 项目根目录运行 npm run build 打包项目，这次不需要再去手动改后缀了，直接把打包后结果整个拖入到上传框点击上传

配置完成后，再次访问静态网站地址，发现已经成功，分析请求响应内容也都是压缩后的

点击下方，第一时间了解华为云新鲜技术~