1、將vue 工程正確部署到nginx 上，首先將vue 工程進行打包 npm run build，在此之前就要一些參數(shù)修改為將要部署環(huán)境所需參數(shù)比如api請求地址前綴
屏蔽本地代理服務配置，改由nginx來實現(xiàn)
2、修改nginx.conf配置文件
3、刷新nginx.conf 配置或者重啟nginx
4、部署后首次訪問工程時特別慢，由于打包后的文件過大，如vendor,此時需要進行優(yōu)化，可以從2方面，一種時將工程本身文件大小進行壓縮，另一種則需要使用第三方csdn 加速。
cdn 加速：
將第三方官方引用插件通過引用cdn 地址提高訪問效率。在public/index.html 中引入
同時打包時將以上需要cdn加速的去除
壓縮文件：
將超過一定大小的文件進行壓縮，此時需要依賴插件 compression-webpack-plugin，需要使用npm 進行安裝后方可使用，在vue.config.js中配置 module.exports = {} 內(nèi)
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 塊內(nèi) 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靜態(tài)資源
gzip_disable "msie6"; #不使用gzip IE6
gzip_min_length 100k; #gzip壓縮最小文件大小，超出進行壓縮（自行調(diào)節(jié)）
gzip_buffers 4 16k; #buffer 不用修改
gzip_comp_level 5; #壓縮級別:1-10，數(shù)字越大壓縮的越好，時間也越長
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;
}
}
修改后不要著急重啟，或重啟后發(fā)現(xiàn)提示配置文件報錯，可能提示不支持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的編譯參數(shù)（根據(jù)安裝時的參數(shù)可以追加參數(shù)）
[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參數(shù)
[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
