vue项目发布采用gzip压缩文件部署到nginx无法运行问题

Posted 左直拳

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue项目发布采用gzip压缩文件部署到nginx无法运行问题相关的知识,希望对你有一定的参考价值。

gzip压缩分为服务器压缩和前端文件压缩。应该二者结合,综合使用。

一、问题描述

有一个VUE项目,开发环境下,使用npm运行,一切正常,发布部署到nginx上一片空白。用谷歌浏览器进入开发者工具,提示什么“Uncaught SyntaxError: Unexpected token ‘<’ ”

为什么会报这个错误呢?这与nginx的设置有关。

location / 
	root   E:/订餐谁拿饭抓阄评估规划执行监控审计管理系统/code/web/dist;		
	index  index.html index.htm;
	try_files $uri $uri/ /index.html;

最后这一句,当出错的时候会强制跳转到 index.html 页面,而js文件不能识别html,因此报Uncaught SyntaxError: Unexpected token < 错误。

更确切地说,是浏览器向服务器请求js文件,服务器报错了,依照nginx的设定,转跳到了index.html,即nginx向客户端返回了index.html的内容。而浏览器接收到这部分"javascript"内容后,无法解释,于是就报了“Uncaught SyntaxError: Unexpected token <”的错。

为什么向服务器请求js文件会报错呢?原因是,在我们的发布包里,没有这些js文件,只有js文件的压缩包:

nginx应该是可以识别这些压缩包,能处理gzip,所以没有报404错误(如果将发布包部署到IIS,会报404错误),但不知道什么原因,nginx没有正确返回js内容,而是触发了异常。

二、vue的文件压缩处理

之所以我这个vue项目的发布文件,有*.gz文件,是因为配置文件vue.config.js中指定使用了压缩插件:

switch (process.env.NODE_ENV) 
  case "development":
	...
    break;
  case "production"://vue3默认情况下,npm run build时,process.env.NODE_ENV==="production"
  	...
    WEBPACK_PLUGINS.push(
      new CompressionWebpackPlugin(
        filename: "[path].gz[query]",
        algorithm: "gzip",
        test: new RegExp("\\\\.(" + productionGzipExtensions.join("|") + ")$"),
        threshold: 10240,
        minRatio: 0.8,
        deleteOriginalAssets: true,//删除压缩后的原文件
      )
    );
    break;

三、nginx的gzip设置

事实上,对于服务器来说,有2种应用gzip的途径。一是我们发布文件的时候,不做任何处理,由nginx在处理客户端请求时,将内容压缩返回;二就是我们发布压缩文件,nginx直接读取并返回给客户端。

两种方案,nginx的设置有所不同。

1、nginx压缩

http 
    include       mime.types;
    default_type  application/octet-stream;	
    sendfile        on;

	server 
	    listen       8001;
        server_name  localhost;

        gzip on;
        gzip_min_length 1k;
        gzip_buffers 4 16k;
        #gzip_http_version 1.0;
        gzip_comp_level 8;
        gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
        gzip_proxied any;
        gzip_vary off;
        gzip_disable "MSIE [1-6]\\.";

		location / 
			root   E:/订餐谁拿饭抓阄评估规划执行监控审计管理系统/code/web/dist;		
			index  index.html index.htm;
			try_files $uri $uri/ /index.html;
		
	

使用浏览器观察,可以看到

2、发布文件压缩

http 
    include       mime.types;
    default_type  application/octet-stream;	
    sendfile        on;

	server 
	    listen       8001;
        server_name  localhost;

		#会优先查找静态gzip资源
		gzip_static on;
		
		location / 
			root   E:/订餐谁拿饭抓阄评估规划执行监控审计管理系统/code/web/dist;		
			index  index.html index.htm;
			try_files $uri $uri/ /index.html;
		
	

我的情况,就属于第二种方案,然而却出现了问题。出现问题的原因,是应该保留压缩前的原文件,而不是删掉。即部署时,被压缩文件既有压缩包,又有原文件。nginx会有限查找静态gzip资源。要保留原文件的原因,是nginx用来索引和对照的?

使用浏览器观察,

注意方案1的ETag存在"W/"开头,而方案2的ETag则没有。‘W/’(区分大小写)表示使用弱验证器 。弱 etags 很容易生成,但在比较时用处不大。强验证器是比较的理想选择,但很难有效地生成。ETag弱相同,表示两个资源可能在语义上是等效的,但不是逐字节相同的。这意味着当使用字节范围请求时,弱 ETag 会阻止缓存,但强 ETag 意味着范围请求仍然可以被缓存。

3、两种压缩方案的对比
对比第一种和第二种方式,发现请求ETag有区别,第二种应该比较好。避免前端没有做压缩处理,服务端最好兼容两种都配置,存在静态gzip则用静态资源,不存在则服务端处理。

四、解决方案

综上,解决方案很简单,就是我们在发布的时候,既要压缩,又要保留压缩前的文件,即将deleteOriginalAssets的值设为false。

vue.config.js

WEBPACK_PLUGINS.push(
      new CompressionWebpackPlugin(
        filename: "[path].gz[query]",
        algorithm: "gzip",
        test: new RegExp("\\\\.(" + productionGzipExtensions.join("|") + ")$"),
        threshold: 10240,
        minRatio: 0.8,
        deleteOriginalAssets: false,//删除压缩后的原文件
      )
    );

nginx采用方案2或者结合起来使用均可。

五、小结

这样子发布出来的包,比之前更大了。但是,可以带来性能的提升,值得去做,这点存储空间不算什么。

为什么系统会提供一个删掉压缩包原文件的选项呢?事实已经证明,这种模式在nginx上不被支持。我猜测,这可能是用于运行在node服务器上的。

参考文章:
Vue 项目性能优化之gzip

以上是关于vue项目发布采用gzip压缩文件部署到nginx无法运行问题的主要内容,如果未能解决你的问题,请参考以下文章

vue加载nginx内存狂涨不加载

将 Vue.js 项目部署至静态网站托管,并开启 Gzip 压缩

vue-cli + nginx项目开启gzip压缩

vue 开启gzip ,nginx 配置gzip

Nginx 动态压缩与静态压缩,显著提高前后端分离项目响应速度!

nodejs+nginx配置gzip压缩