Nginx之Vue部署到子站点

最新推荐文章于 2024-05-02 11:57:58 发布

关关长语

最新推荐文章于 2024-05-02 11:57:58 发布

阅读量2.7k

点赞数 1

分类专栏：随笔技术总结 # Nginx 文章标签： vue.js nginx 前端

本文链接：https://blog.csdn.net/qq_28806349/article/details/121345610

版权

随笔同时被 3 个专栏收录

29 篇文章 1 订阅

订阅专栏

技术总结

17 篇文章 2 订阅

订阅专栏

Nginx

3 篇文章 0 订阅

订阅专栏

nginx

一、问题场景

日常部署过程中，时常会遇到将开发好的Vue项目部署到一个站点的子目录下，与主站点共用一个端口号，同时使用不同的目录静态资源。

二、解决方案

当前子目录名称为D4rf，准备工作，Vue配置静态资源文件打包路径带有前缀 D4rf，打包的静态文件，通过访问通过子目录获取，打包好的静态页面内容如下：

<!DOCTYPE html>
<html lang=en>
    <head>
        <meta charset=utf-8>
        <meta http-equiv=X-UA-Compatible content="IE=edge">
        <meta name=viewport content="width=device-width,initial-scale=1">
        <meta base=/D4rf/ ><link rel=icon href=/D4rf/favicon.ico>
        <title>数据处理</title>
        <link href=/D4rf/static/css/chunk-28393036.e37ecdeb.css rel=prefetch>
        <link href=/D4rf/static/css/chunk-3c6794a0.cb2d43de.css rel=prefetch>
    </head>
    <body>
        <noscript></noscript>
        <div id=app></div>
        <script src=/D4rf/static/js/chunk-vendors.acf9d8ad.js></script>
        <script src=/D4rf/static/js/app.cba52f1c.js></script>
    </body>
</html>

Nginx配置逻辑为子站点仍然是需要单独使用一个独立端口进行部署，只是在主站点下通过匹配配置，进行请求转发处理。

子站点配置如下：

server {
        listen       10001;
        server_name  localhost;
		location / {
            root   站点文件物理路径;#站点静态文件物理路径，右斜杠 \ 写为左斜杠 /
            index  index.html index.html;
			try_files $uri $uri/ /index.html; #加上这一行
        }   
}

主站点配置如下：

server {
        listen       10002;
        server_name  localhost;
        #charset koi8-r;

        access_log  logs/xxxx.access.log;
	    error_log logs/xxxx.error.log;
	    
    	# 忽略内容
    
		# 子站点
		location ^~/D4rf/ {
          proxy_redirect off;
          proxy_set_header Host $host;
          proxy_set_header X-Real-IP $remote_addr;
          proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
          proxy_pass http://127.0.0.1:10001/;
        }
    
    	location / {
        # 忽略内容
        # 忽略内容
    	}
}