vue cli3通过gzip压缩打包文件，nginx解压文件(项目优化)_vue-clis3 本地gzip

第一步：vue安装压缩工具

cnpm install --save-dev compression-webpack-plugin@1.1.12
1

如果上面这句没能安装成功先安装下面这句，再安装上面那句命令

cnpm config set proxy http://username:password@ip:port  
1

第二步：配置压缩的代码，在vue.config.js文件里配置，没有这个文件就在项目根目录下创建一个

const CompressionPlugin = require('compression-webpack-plugin')
module.exports = {
    publicPath: './',
    assetsDir: 'static',
    productionSourceMap: false,
    configureWebpack: () => {// 这个是配置gzip压缩的
        if (process.env.NODE_ENV === 'production') {
            return {
                plugins: [new CompressionPlugin({
                    test: /\.js$|\.html$|\.css/, // 指定压缩文件
                    threshold: 10240, // 超过10kb的文件进行压缩
                    deleteOriginalAssets: true // 是否删除原文件
                })]
            }
        }
    },
    devServer: {// 这个是配置跨域，可以不用写这个只需要上面的就行
        proxy: {// 这个是配置跨域，可以不用写这个只需要上面的就行
            '/api':{
                target:'127.0.0.1',// 这个是配置跨域的域名
                ws:true,
                secure:false,
                changeOrigin:true,
                pathRewrite:{
                    '^/api':'/api'
                }
            }
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

配置好之后运行命令 npm run build 进行压缩文件

第三步：下载nginx官网地址如下，选择1.81版本的，其实其他版本也行，只是新版本比较好一点

http://nginx.org/en/download.html
1

第四步：解压nginx，并且配置对应的项目和解压命令

上面的图片是找到需要配置的文件，下面的图片是配置相对应的命令

解压的命令

 gzip on;
 gzip_static on;
 gzip_comp_level 2;
1
2
3

第五步：启动nginx

然后输入下面的命令，启动nginx，或者双击上图的 nginx.exe这个绿色图标，也可以启动

nginx.exe -s reload
1

第六步：在浏览器输入 127.0.0.1就可以查看你打包的项目了