本方案适用于vue-router-history模式的前后端分离项目，前端项目部署在nginx下。
环境
Node 8.11.4
Vue-CLI 4.x
Nginx 1.15.7
安装插件
npm install compression-webpack-plugin
配置vue.config.js
先引入插件
const CompressionPlugin = require('compression-webpack-plugin');
在module.exports中添加下方module.exports内的代码。
module.exports = {
/*从这里开始添加*/
configureWebpack: config => {
if(process.env.NODE_ENV === 'production'){
return {
plugins: [new CompressionPlugin({
test: /\.js$|\.html$|\.css/,
threshold: 10240,
deleteOriginalAssets: false
})]
}
}
}
/*到这里结束*/
};
配置Nginx
我这里router是history模式的，在之前的博客中提到过相应的配置方法。
我这里是域名下只有一个项目的配置，如果你的环境是一个域名多个项目，可以适当对齐调整，原理是一样的。
请参考下方代码对之前项目所配置的location进行修改
之前的
location / {
root e:\workgit\abc;
error_page 405 =200 http://$host:8085/$request_uri;
index index.html index.htm;
try_files $uri $uri/ @rewrites;
}
location @rewrites {
rewrite ^(.*)$ /index.html last;
}
更新后
location / {
root e:\workgit\abc;
error_page 405 =200 http://$host:8085/$request_uri;
gzip on;
gzip_static on;
gzip_http_version 1.1;
gzip_comp_level 3;
gzip_types text/plain application/json application/x-javascript application/css application/xml application/xml+rss text/javascript application/x-httpd-php image/jpeg image/gif image/png image/x-ms-bmp;
index index.html index.htm;
try_files $uri $uri/ @rewrites;
}
location @rewrites {
rewrite ^(.*)$ /index.html last;
}
请不要无脑复制。
