iframe父系统嵌入子系统,打包后子系统无法通过nginx访问的问题

原创已于 2022-12-12 14:48:30 修改 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#nginx #vue.js #webpack

于 2022-12-09 10:04:54 首次发布

本文介绍了一个具体的Nginx配置案例，用于将一个子系统嵌入到父系统中，并通过Nginx实现两个项目的代理。文章讨论了配置的具体细节及遇到的问题。

描述: 项目需求为在父系统中嵌入子系统, nginx代理同级目录下俩个项目

nginx配置如下: /pageOffice为子系统, /为父系统

    location ^~  /pageOffice/ {
            root   /cetec/;
            index index.html;
            try_files $uri $uri/ =404;
            proxy_set_header Host $host;
            proxy_set_header X-Forwarded-For $remote_addr;
            proxy_set_header X-Real-IP @remote_addr;
        }
		
	location ^~  /api/pageOffice/save {
            proxy_pass http://localhost:8000;
            proxy_set_header Host $host;
            proxy_set_header X-Forwarded-For $remote_addr;
            proxy_set_header X-Real-IP @remote_addr;
        }
		
	location  /pgo/ {
           proxy_pass http://localhost:8000;
           proxy_set_header Host $HOST;
        }

问题一、 nginx配置后, 子系统正常打包访问后出现语法错误提示,仔细看会发现是路径无法找到,出现(app.js, chunchk.js等)报错, 在子系统config.js中改一下即可

 publicPath: "/pageOffice",

问题二、项目build后上线访问时出现index.html中引用路径错误, 鼠标放入后发现是中间少了一层结构,原来所有的script引入写错了, 改成./的形式即可

<script src="./js/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="./js/bootstrap.min.js" type="text/javascript"></script>
<script src="./js/jquery.isotope.min.js" type="text/javascript"></script>

问题三、子系统部署上线后在父系统中展示时出现404的错误, 而后将路由改为hash即可, 具体可参考文章 https://www.cnblogs.com/qdjj/p/12878286.html

问题四、当修改 publicPath后可能会出现跳转路由时无法找到的情况, 需要修改一下路由中的base得以解决

const router = new VueRouter({
  base:'/pageOffice',
  mode: 'hash',
  routes
})

此文字分享不具有统一性,只针对恰好遇到相同问题的同学进行尝试解决