1、将vue 工程正确部署到nginx 上,首先将vue 工程进行打包 npm run build,在此之前就要一些参数修改为将要部署环境所需参数比如api请求地址前缀
屏蔽本地代理服务配置,改由nginx来实现
2、修改nginx.conf配置文件
3、刷新nginx.conf 配置或者重启nginx
4、部署后首次访问工程时特别慢,由于打包后的文件过大,如vendor,此时需要进行优化,可以从2方面,一种时将工程本身文件大小进行压缩,另一种则需要使用第三方csdn 加速。
cdn 加速:
将第三方官方引用插件通过引用cdn 地址提高访问效率。在public/index.html 中引入
同时打包时将以上需要cdn加速的去除
压缩文件:
将超过一定大小的文件进行压缩,此时需要依赖插件 compression-webpack-plugin,需要使用npm 进行安装后方可使用,在vue.config.js中配置 module.exports = {} 内
const CompressionPlugin = require('compression-webpack-plugin')
configureWebpack: {
externals: {
vue: 'Vue',
axios: 'axios',
'vue-router': 'VueRouter',
vuex: 'Vuex',
iview: 'iview'
},
// GZIP压缩
plugins: [
new CompressionPlugin({
test: /\.js$|\.html$|\.css/, // 匹配文件
threshold: 10240, // 对超过10k文件压缩
//deleteOriginalAssets:true, //删除源文件
})
]
},
5、修改nginx 配置支持GZIP 压缩
在http 块内 server 外配置
http {
include mime.types;
default_type application/octet-stream;
#access_log logs/access.log main;
sendfile on;
#tcp_nopush on;
#keepalive_timeout 0;
keepalive_timeout 65;
#gzip on;
gzip on; #开启或关闭gzip on off
gzip_static on;#是否开启gzip静态资源
gzip_disable "msie6"; #不使用gzip IE6
gzip_min_length 100k; #gzip压缩最小文件大小,超出进行压缩(自行调节)
gzip_buffers 4 16k; #buffer 不用修改
gzip_comp_level 5; #压缩级别:1-10,数字越大压缩的越好,时间也越长
gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; # 压缩文件类型
gzip_vary off; #跟Squid等缓存服务有关,on的话会在Header里增加 "Vary: Accept-Encoding"
server {
listen 88;
server_name www.xxx.com ;
#charset koi8-r;
# Vue路由模式为history需添加的配置
location / {
if (!-e $request_filename) {
rewrite ^(.*)$ /index.html?s=$1 last;
break;
}
root /usr/www/xxx;
index index.html;
}
}
修改后不要着急重启,或重启后发现提示配置文件报错,可能提示不支持GZIP,说明你的nginx 安装时没有安装相关模块,此时需要重新编译安装。
1、检查nginx配置文件错误提示如下(注意要切换到自己nginx的安装目录和源码目录)
[root@server nginx]# /applications/nginx/sbin/nginx -t -c /applications/nginx/nginx/nginx.confnginx: [emerg] unknown directive "gzip_static" in /applications/nginx/nginx/inc/gzip.conf:4nginx: configuration file /applications/nginx/nginx/nginx.conf test failed
2、查看nginx的编译参数(根据安装时的参数可以追加参数)
[root@server nginx]# /applications/nginx/sbin/nginx -Vnginx version: nginx/1.6.0built by gcc 4.4.7 20120313 (Red Hat 4.4.7-18) (GCC) TLS SNI support enabledconfigure arguments: --user=www --group=www --add-module=../ngx_cache_purge-1.3/ --prefix=/applications/nginx-1.6.0 --with-http_stub_status_module --with-http_ssl_module --with-http_flv_module
3、解决方式,重新编译、安装nginx,增加--with-http_gzip_static_module参数
[root@server nginx-1.6.0]# ./configure --user=www --group=www --add-module=../ngx_cache_purge-1.3/ --prefix=/applications/nginx-1.6.0 --with-http_stub_status_module --with-http_ssl_module --with-http_flv_module --with-http_gzip_static_module[root@server nginx-1.6.0]# make && make install
联系客服