绝对路径打包前端资源在Nginx中代理配置

最新推荐文章于 2025-09-27 11:11:52 发布

原创最新推荐文章于 2025-09-27 11:11:52 发布 · 3.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #nginx #vue.js

本文讲述了如何正确在Nginx中部署Vue项目，包括打包后资源的部署策略，以及处理绝对路径资源的问题，涉及了多级目录配置和代理转发。重点在于解决DataRT绝对路径资源分享功能的404问题。

问题1，如何正确将打包后的vue项目在nginx中部署

vue前端项目打包之后，静态资源就只有也给index.html文件一些js/css资源文件，部署的时候，可以直接将打包好的静态资源放到Nginx的html目录下去访问，但是如果我们将资源放到html/demo目录下，然后配置过滤路径之后去访问，会发现和在开发环境中访问的效果不同。在开发环境中，可以直接输入路由地址，但是部署到nginx之后，必须是http:/ip:port/demo/index.html才行，然后后面再去跟路由的时候，发现页面不能按照预期的方式渲染和输出，总是找不到对应的页面。这主要是Nginx里的配置不正确导致的。

如下给一个可用的配置

server {
        listen       8013;
        limit_conn perip 10;
        limit_rate 1024k;
        #charset koi8-r;

        access_log  logs/access_8013.log  main;
		
		
		location  /portal {
            root   html/smartdata;
            index  index.html index.htm;
            try_files $uri $uri/ /portal/$args;   
            if ($request_filename ~* .*\.(?:js|css|svg|png|jpg)$)
              {
                   expires      7d;
             }
		}
}

静态资源的路劲是 html/smartdata/portal，如下所示：

按照这种方式配置，实际上就是匹配url中的portal，然后到html/smartdata目录下去找portal这个文件，显然是没有这个文件，然后到portal目录下去找对应index.html。这块关于index的指令可以参考这篇博文，写的还是很好的。

问题2，绝对路径下的打包资源部署

通过webpack打包的前端工程，在打包时候，资源的请求可以是相对路径也可以是绝对路径，通过配置打包时候的参数可以控制。一般情况下，我们都配置成相对路径，这样可以直接使用上面那种方式去部署，可以重新规划静态资源的位置。如果采用绝对路径打包的静态资源，要么只能放到html根目录下，要么就只能对 /进行拦截转发。

最近在做datart的集成，发现datart前端打包之后，资源都是绝对路径，因为dataRT的官方部署是前后端在一块部署的，静态资源作为后端项目的一部分进行部署，但是因为项目的需要，我们必须分开部署，这时就发现dataRT部署在Nginx中不行。苦于没有更强大的技术实力做改造，所以只能想起他办法，最后通过拦截/来配置dataRt，也可以满足预期，一个可用的Nginx配置如下:

  server {
        listen       8013;
        limit_conn perip 10;
        limit_rate 1024k;
        #charset koi8-r;

        access_log  logs/access_8013.log  main;
		
        location / {
		   root html/smartdata/datart;
		   index index.html index.html;
		   try_files $uri $uri/ /$args;   
     	   if ($request_filename ~* .*\.(?:html|js|css|svg|png|jpg)$)
		   {
				   expires      7d;
		   }
		}
		
		location  /portal {
            root   html/smartdata;
            index  index.html index.htm;
            try_files $uri $uri/ /portal/$args;   
            if ($request_filename ~* .*\.(?:js|css|svg|png|jpg)$)
              {
                   expires      7d;
             }
		}
}

这样所有http://ip:port/portal/*的请求都到portal，其余的都会被dataRt拦截掉。

可以仔细看下上面的server配置，不难发现，只要不是/portal的请求，最后都是请求到datart的index.html中，并且做正确的路由渲染。这就意味着对于dataRT来说，根基目录就是index.html。

但是dataRT有一个分享的功能，分享出去的url地址统一是：http://ip:port/shareDashboard/xxx，而shareDashboard对应到DataRT实际上是一个shareDashboard.html文件，也就是和index.html统计的文件，这就意味着，dataRT的入口不止一个index.html。按照如上的配置就发现，不管怎样分享的外链都是404，因为index.html中没有关于分享外链的路由处理。这怎么办?

一开始尝试修改index指令，添加一个shareDashboard.html，但是发现根本不行。

然后尝试再新增一个location /shareDashboard，但是发现也不行，因为这会将shareDashboard作为一个路由路径到index.html中去访问，但实际上根本没有。

最后的解决办法是在增加一个转发，配置如下:


	
server {
        listen       8013;
        limit_conn perip 10;
        limit_rate 1024k;
        #charset koi8-r;

        access_log  logs/access_8013.log  main;
		
        location / {
		   root html/smartdata/datart;
		   index index.html index.html;
		   try_files $uri $uri/ /$args;   
     	   if ($request_filename ~* .*\.(?:html|js|css|svg|png|jpg)$)
		   {
				   expires      7d;
		   }
		}
		
		location  /portal {
            root   html/smartdata;
            index  index.html index.htm;
            try_files $uri $uri/ /portal/$args;   
            if ($request_filename ~* .*\.(?:js|css|svg|png|jpg)$)
              {
                   expires      7d;
             }
		}
		location /shareDashboard/{
			proxy_pass http://192.168.10.148:8014;
		}
  }

server {
		listen       8014;
        limit_conn perip 10;
        limit_rate 1024k;
        #charset koi8-r;

        access_log  logs/access_8013.log  main;
		
        location / {
		   root html/smartdata/datart;
		   index shareDashboard.html shareDashboard.html;
		   try_files $uri $uri/ /$args;   
     	   if ($request_filename ~* .*\.(?:html|js|css|svg|png|jpg)$)
		   {
				   expires      7d;
		   }
		}
}

问题解决。。。。