|
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.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的编译参数（根据安装时的参数可以追加参数） [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参数 [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 |
|
|
