nginx + vue-cli2 开启gzip_vue-cli2开启productiongzip-优快云博客

先上nginx的配置

#gzip  on;
开始
    gzip on;
    gzip_min_length 1k;
    gzip_buffers 16 64k;
    gzip_http_version 1.1;
    gzip_comp_level 9;
    gzip_types text/plain application/x-javascript application/javascript text/javascript text/css application/xml application/x-httpd-php image/jpeg image/gif image/png;
    gzip_vary on;
结束，将中间这段代码沾到你的nginx.conf文件里面去
    server {
        listen       80;
        server_name  localhost;

第二步就是前端要做的事情了

当我们执行你npm run build 的时候依赖顺序是这样的 build.js ===》webpack.prod.conf.js =====》config/index.js 是有这样的依赖关系的

开关在config文件夹下的index.js里面

build: {
    // // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'), // 编译输入的 index.html 文件

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'), // 编译输出的静态资源路径
    assetsSubDirectory: 'static', // 编译输出的二级目录
    assetsPublicPath: '/', // 编译发布的根目录，可配置为资源服务器域名或 CDN 域名

    // // Template for index.html
    // index: path.resolve(__dirname, '../test/index.html'), // 编译输入的 index.html 文件

    // // Paths
    // assetsRoot: path.resolve(__dirname, '../test'), // 编译输出的静态资源路径
    // assetsSubDirectory: 'static', // 编译输出的二级目录
    // assetsPublicPath: '/test/', // 编译发布的根目录，可配置为资源服务器域名或 CDN 域名

    /**
     * Source Maps
     */

    productionSourceMap: false, // 是否开启 cssSourceMap
    // https://webpack.js.org/configuration/devtool/#production
    devtool: '#source-map',

    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: true,
    productionGzipExtensions: ['js', 'css'],

productionGzip:true就行但是注意上面的提示就是你开启gzip的前提是一定要下载一个插件，然后在修改一个配置文件

webpack.prod.conf.js

webpackConfig.plugins.push(
    new CompressionWebpackPlugin({
      asset: '[path].gz[query]',
      algorithm: 'gzip',
      test: new RegExp(
        '\\.(' +
        config.build.productionGzipExtensions.join('|') +
        ')$'
      ),
      threshold: 10240,
      minRatio: 0.8
    })
  )

将里面的asset修改为filename 此时执行npm run build 的时候还会报一个错误说options什么配置项有问题，然后差了资料说是版本的问题，所以去package.json里面修改刚才依赖的插件的版本"compression-webpack-plugin": "^1.1.12", 之前是3.0.0 我改成了1.1.12，执行顺利完成，此时在将打包好的资源放到服务器上，打开浏览器输入地址看看加载的js的大小跟文件中.gz结尾的文件大小是否一致。

如何查看是否走的gzip模式，打开浏览器