在 vue.config.js 中添加配置
// vue.config.js const CompressionPlugin = require('compression-webpack-plugin') module.exports = { chainWebpack: config => { // 这里是对环境的配置，不同环境对应不同的BASE_URL，以便axios的请求地址不同 config.plugin('define').tap(args => { args[0]['process.env'].BASE_URL = JSON.stringify(process.env.BASE_URL) return args }) if (process.env.NODE_ENV === 'production') { // #region 启用GZip压缩 config .plugin('compression') .use(CompressionPlugin, { asset: '[path].gz[query]', algorithm: 'gzip', test: new RegExp('\\.(' + ['js', 'css'].join('|') + ')$'), threshold: 10240, minRatio: 0.8, cache: true }) .tap(args => { }) // #endregion } } }npm run build后能看到生成 .gz 文件就OK了。如果你的服务器使用nginx的话，nginx也需要配置开启GZIP、下面会讲到如何在nginx中开启GZIP
对于 vue、vue-router、vuex、axios和element-ui等等这些不经常改动的库、我们让webpack不对他们进行打包，通过cdn引入，可以减少代码的大小、也可以减少服务器的带宽，更能把这些文件缓存到客户端，客户端加载的会更快。
配置vue.config.js
const CompressionPlugin = require('compression-webpack-plugin') module.exports = { chainWebpack: config => { // 省略其它代码 ······ // #region 忽略生成环境打包的文件 var externals = { vue: 'Vue', axios: 'axios', 'element-ui': 'ELEMENT', 'vue-router': 'VueRouter', vuex: 'Vuex' } config.externals(externals) const cdn = { css: [ // element-ui css '//unpkg.com/element-ui/lib/theme-chalk/index.css' ], js: [ // vue '//cdn.staticfile.org/vue/2.5.22/vue.min.js', // vue-router '//cdn.staticfile.org/vue-router/3.0.2/vue-router.min.js', // vuex '//cdn.staticfile.org/vuex/3.1.0/vuex.min.js', // axios '//cdn.staticfile.org/axios/0.19.0-beta.1/axios.min.js', // element-ui js '//unpkg.com/element-ui/lib/index.js' ] } config.plugin('html') .tap(args => { args[0].cdn = cdn return args }) // #endregion } } }修改index.html
<!--public/index.html--> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta content="width=device-width,initial-scale=1.0"> <link href="<%= BASE_URL %>favicon.ico"> <% if (process.env.NODE_ENV === 'production') { %> <% for(var css of htmlWebpackPlugin.options.cdn.css) { %> <link href="http://www.likecs.com/<%=css%>" as="style"> <link href="http://www.likecs.com/<%=css%>" as="style"> <% } %> <% for(var js of htmlWebpackPlugin.options.cdn.js) { %> <link href="http://www.likecs.com/<%=js%>" as="script"> <script src="http://www.likecs.com/<%=js%>"></script> <% } %> <% } %> <title>vue-cli3-project</title> </head> <body> <noscript> <strong>We're sorry but vue-cli3-project doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <div></div> <!-- built files will be auto injected --> </body> </html> 7.3 全站cdn我们已经把第三方库使用cdn替代了，那么我们build后生成的 js,css之类的文件能否也用cdn呢？
要想把自己的资源上传到cdn上，前提是得有自己的cdn域名，如果没有的话，可以到七牛云官网上注册申请一个
注册七牛云账号
到七牛云对象存储模块中新建存储空间
输入存储空间信息
确定创建
创建成功后会跳转到这个存储空间的控制台页面
其中有个域名就是你的测试域名
我们可以在内容管理那上传我们的js、css之类的文件、不过我们的文件那么多，一个一个上传明显不合理。要你你也不干。
这时候，这些批量又重复的操作应该由我们的node出马，让我们来通过 node来批量上传我们的资源文件
将生成的js、css资源上传到七牛cdn在七牛云官网的文档中心有介绍如何通过node上传文件、感兴趣的人可以自己去研究一下。
查看AccessKey和SecretKey，在你的个人面板 -> 秘钥管理 ，这两个秘钥待会会用到
安装需要的插件
npm install qiniu glob mime --save-dev