1、將vue 工程正確部署到nginx 上，首先將vue 工程進(jìn)行打包 npm run build，在此之前就要一些參數(shù)修改為將要部署環(huán)境所需參數(shù)比如api請(qǐng)求地址前綴

屏蔽本地代理服務(wù)配置，改由nginx來(lái)實(shí)現(xiàn)

2、修改nginx.conf配置文件

3、刷新nginx.conf 配置或者重啟nginx

4、部署后首次訪問(wèn)工程時(shí)特別慢，由于打包后的文件過(guò)大，如vendor,此時(shí)需要進(jìn)行優(yōu)化，可以從2方面，一種時(shí)將工程本身文件大小進(jìn)行壓縮，另一種則需要使用第三方csdn 加速。

cdn 加速：

      將第三方官方引用插件通過(guò)引用cdn 地址提高訪問(wèn)效率。在public/index.html 中引入

同時(shí)打包時(shí)將以上需要cdn加速的去除

壓縮文件：

      將超過(guò)一定大小的文件進(jìn)行壓縮，此時(shí)需要依賴插件 compression-webpack-plugin，需要使用npm 進(jìn)行安裝后方可使用，在vue.config.js中配置 module.exports = {} 內(nèi)

const CompressionPlugin = require('compression-webpack-plugin')

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; #開啟或關(guān)閉gzip on off

    gzip_static on;#是否開啟gzip靜態(tài)資源

    gzip_disable "msie6"; #不使用gzip IE6

    gzip_min_length 100k; #gzip壓縮最小文件大小，超出進(jìn)行壓縮（自行調(diào)節(jié)）

    gzip_buffers 4 16k; #buffer 不用修改

    gzip_comp_level 5; #壓縮級(jí)別:1-10，數(shù)字越大壓縮的越好，時(shí)間也越長(zhǎng)

    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等緩存服務(wù)有關(guān)，on的話會(huì)在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)提示配置文件報(bào)錯(cuò)，可能提示不支持GZIP,說(shuō)明你的nginx 安裝時(shí)沒(méi)有安裝相關(guān)模塊，此時(shí)需要重新編譯安裝。

1、檢查nginx配置文件錯(cuò)誤提示如下(注意要切換到自己nginx的安裝目錄和源碼目錄)

[root@server nginx]# /applications/nginx/sbin/nginx -t -c /applications/nginx/nginx/nginx.conf
nginx: [emerg] unknown directive "gzip_static" in /applications/nginx/nginx/inc/gzip.conf:4
nginx: configuration file /applications/nginx/nginx/nginx.conf test failed

2、查看nginx的編譯參數(shù)（根據(jù)安裝時(shí)的參數(shù)可以追加參數(shù)）

[root@server nginx]# /applications/nginx/sbin/nginx -V
nginx version: nginx/1.6.0
built by gcc 4.4.7 20120313 (Red Hat 4.4.7-18) (GCC) 
TLS SNI support enabled
configure 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