问答博客标签用户活动
logo极客观点logo研发管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

Vue2 多入口配置后为什么只能显示一个页面？

头像
归期
    42
    新手上路，请多包涵

    vue2设置多入口，为什么只能显示一个页面，另外一个不显示。
    vue.config.js配置

    
pages: {
    //配置多页面入口
    index: {
      entry: "src/main.js",
      template: "public/index.html",
      filename: "index.html",
      chunks:['chunk-vendors','chunk-common','index']
    },
    printing: {
      entry: "src/printing/printing.main.js",
      template: "public/printing.html",
      filename: "printing.html",
      chunks:['chunk-vendors','chunk-common','printing']
    },
  },

    服务器的配置

    location /printing {
    index  printing.html printing.htm;
    try_files $uri $uri/ /printing.html;
}
location / {
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
}

    但是使用哈希模式的路由，在打包后我可以在本地打开两个页面，把路由模式换成history模式只有index.html显示。

    路由模式换成history模式，打包上线后可以两个路口页面都可以用进去

    vue2
    阅读 826
    avatarAI BotBETA

    回答

    在 Vue2 中使用多入口配置时，如果你遇到了在 history 模式下只能显示一个页面的问题，这通常是由于服务器配置不正确导致的。在使用 history 模式时，Vue Router 不会向服务器发送请求来获取不同的页面，而是依赖于前端路由来动态地显示不同的组件。因此，服务器需要被正确地配置以支持这种前端路由。

    解决方案

    1. 确保服务器对所有路由返回同一个 index.html 文件：
      当使用 history 模式时，服务器需要对所有路由（除了实际存在的静态资源）返回同一个 index.html 文件，这是由 Vue Router 在前端处理路由的前提。在你的服务器配置中，你已经为 / 和 /printing 分别设置了 try_files 指令，但是你需要确保在 history 模式下，任何未匹配的路由都应该返回对应的 index.html 文件（基于请求的上下文，可能是 index.html 或 printing.html）。

    2. 修改 Nginx 配置以支持所有路由：
      一个更通用的方法是在 Nginx 中设置一个捕获所有未匹配路由的 location 块，并返回对应的入口页面的 index.html。例如，你可以修改你的 Nginx 配置如下：

      location / {
    try_files $uri $uri/ /index.html;
}

location /printing/ {
    try_files $uri $uri/ /printing.html;
}

# 捕获所有其他路由并重定向到对应的入口页面
location / {
    if (!-e $request_filename){
        rewrite ^(.*)$ /index.html last;
    }
}
# 注意：上面的通用捕获可能会与前面的规则冲突，需要根据你的实际需求调整
# 或者使用更具体的正则表达式来区分不同的入口页面

    但是，上面的配置可能会导致冲突，因此一个更稳妥的方法是确保你的应用能够处理所有路由，并且服务器只是作为一个回退机制来提供 index.html 文件。通常，你只需要确保对于 / 和特定的子路径（如 /printing/）有正确的 try_files 配置。

    1. 确保 Vue Router 的 base 配置正确：
      如果你的应用部署在非根路径（如 /printing/），确保在 Vue Router 的配置中设置了正确的 base 属性。
    2. 清除缓存并重新部署：
      在修改服务器配置后，确保清除浏览器缓存和服务器缓存（如果有的话），并重新部署你的应用。

    通过上述步骤，你应该能够解决在 history 模式下多入口页面不显示的问题。如果问题仍然存在，请检查你的 Vue Router 配置和服务器日志以获取更多线索。

    1 个回答
    得票最新
    头像
    知名喷子
      5.9k31631
      ✓ 已被采纳

      盲猜。这是因为在 vue-router 的眼里， /printing 是 / 的一个子路由，所以遇到 /printing 的时候，它并不是跳转到 /printing.html 而是在前端的路由表里面疯狂匹配/printing，如果路由里没有这一项，它自然就匹配不到了。

      如果上面猜想得以证实的话，方案有四种：

      • 最简单，用哈希路由；
      • 坑最多，上微应用，把 /printing 作为子应用运行；
      • 最繁琐，nginx 里，目前的 / 改为 /index，与 /printing 平级，再加一条规则把 / 重定向到 /index，然后在应用里分别配置两种情况下的 router-base （/printing 和 /index各行其道）；
      • 体验最差，添加一条路由规则或者拦截路由，在 /index.html 运行的时候匹配到 /printing 则刷新页面，反过来也是。
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题
      宣传栏