请教一个问题 ，关于上线部署的

[baikai55]

之前部署在根目录，没有问题，现在后端那边做了转发配置 ↓ nginx 的配置 location /zj/wechat/app/system/{ alias /usr/local/nginx/html/system/; index index.html index.htm; try_files $uri $uri/ /zj/wechat/app/system/index.html; }

主应用router :

{ path: "/app/*", name: "app", component: Main, },

base: process.env.NODE_ENV === "production" ? "/zj/wechat/app/system/" : "/",

主应用vue.config.js : publicPath: process.env.NODE_ENV === "production" ? "/zj/wechat/app/system/" : "/",

主应用可以正常显示。 问题出在子应用上，看起来是没有激活路径，点击跳转没有反应

主应用qiankun 的配置 ↓

{ name: "basics", // 应用的名字 entry: dev ? "//localhost:9001" : /zj/wechat/app/system/app/basics, // 默认会加载这个html 解析里面的js 动态的执行 （子应用必须支持跨域）fetch container: "#container", // 容器id activeRule: "/app/sys", // 根据路由 激活的路径 props: {}, // 给子应用传递参数 },

子应用 render

function render(props = {}) { const { container } = props; // console.log(window.POWERED_BY_QIANKUN, "window.POWERED_BY_QIANKUN"); // console.log( process.env.BASE_URL,'routerBase, process.env.BASE_URL'); router = new VueRouter({ base: window.POWERED_BY_QIANKUN ? "/app/sys" : "/", mode: "history", routes, }); instance = new Vue({ router, store, render: (h) => h(App), }).$mount(container ? container.querySelector("#sys-app") : "#sys-app"); }

子应用 vue.config

publicPath: dev ? "/" : /zj/wechat/app/system/app/basics,

请问 是哪里 配置有问题吗？ publicPath 和 entry 保持了一致。麻烦解答一下。非常感谢

[gongshun]

https://qiankun.umijs.org/zh/cookbook#%E5%9C%BA%E6%99%AF-2%E4%B8%BB%E5%BA%94%E7%94%A8%E5%92%8C%E5%BE%AE%E5%BA%94%E7%94%A8%E9%83%A8%E7%BD%B2%E5%9C%A8%E4%B8%8D%E5%90%8C%E7%9A%84%E6%9C%8D%E5%8A%A1%E5%99%A8%E4%BD%BF%E7%94%A8-nginx-%E4%BB%A3%E7%90%86%E8%AE%BF%E9%97%AE

[baikai55]

https://qiankun.umijs.org/zh/cookbook#%E5%9C%BA%E6%99%AF-2%E4%B8%BB%E5%BA%94%E7%94%A8%E5%92%8C%E5%BE%AE%E5%BA%94%E7%94%A8%E9%83%A8%E7%BD%B2%E5%9C%A8%E4%B8%8D%E5%90%8C%E7%9A%84%E6%9C%8D%E5%8A%A1%E5%99%A8%E4%BD%BF%E7%94%A8-nginx-%E4%BB%A3%E7%90%86%E8%AE%BF%E9%97%AE

部署在根目录。nginx 配置访问路径'/'为根目录。主应用和微应用都可以正常运行。

nginx 配置的访问路径为 ’/zj/wechat/app/system/‘。就无法正常访问了

[baikai55]

我在主应用的 router:base/ vue.config: publicPath 加了前缀 /zj/wechat/app/system/ 。 只有主应用可以访问。

[Billyas]

你好！您的问题解决了吗？乾坤的主应用可以加前缀吗？

[zc16607]

我解决了，可以实现主应用增加前缀。

代码修改关键点：

1. 主应用代码的子应用entry、activeRule需要同时增加路径
2. 主应用的vue.config.js中的publicPath需要增加路径
3. 子应用的vue.config.js中的publicPath需要增加路径
4. 子应用的路由文件中，在new Router的base属性需要增加路径

nginx配置示例：

        # 主应用
        location ^~ /microapp {
                alias /home/user/www/app_main/dist/;
                index  index.html index.htm;
        }
        # 子应用
        location ^~ /microapp/subapp {
            alias /home/user/www/app_subapp/dist/;
                index  index.html index.htm;
                try_files $uri $uri/ /microapp/index.html;
        }

nginx配置关键点：

1. 不能使用root，而要用alias指定项目路径。原因是使用 alias 指令代替 root 指令，Nginx 将直接使用指定的路径作为文件夹的根路径，而root会将 /microapp 添加到路径中，导致路径错误，找不到index.html文件。
2. 子应用必须要加try_files，并且得跟主应用的/path/index.html。因为所有的子应用都必须通过主应用来加载，所以在访问一个子应用的地址时候，因为是vue开发的单应用，nginx找不到对应的文件，就会try_files去到主应用，主应用再去加载子应用的js、css等文件。这就是nginx加载子应用的流程。