带有历史模式和生产的 vue-router 的空白页面

Posted 2023-02-22

【中文标题】带有历史模式和生产的 vue-router 的空白页面

【英文标题】：Blank page with vue-router with history mode and production

【发布时间】：2018-05-17 06:35:13

【问题描述】：

我是 vue 新手，我遇到了下一个错误。我使用默认配置的下一个模板https://github.com/vuejs-templates/webpack 构建了一个小项目。

我添加了vue-router，当我处于开发模式时它工作正常，但是当我构建生产模式并使用时，它显示一个空白页面。

如果我删除配置的历史模式，它可以工作。有什么建议吗？

谢谢。

【参考方案1】：

@bbsimonbb，我测试了回退，但它不起作用。

问题在于路由器的配置，特别是属性库。默认情况下是“/”，但您应该使用 Web 应用程序的基础进行配置。您可以阅读更多详细信息here

例如：http://www.mywebsite.com/myapp/ => 基础：'/myapp/'

我配置路由器的文件路径是/src/router/index.js

我希望它可以帮助某人避免时间。

【讨论】：

base 非常重要，尤其是如果您将 vue 应用程序放在不在根文件夹中时。

【参考方案2】：

生产模式是否涉及更改网络服务器或机器？听起来生产环境可能没有fallback route configured on the server。

【参考方案3】：

由于这是google上弹出的vue-router空白页问题的第一个***链接，我想我会分享我的经验。

在摆弄路线路径后，我得到了一个空白。我的路由器代码如下所示：

const router = new Router(
  routes: [
    
      path: "/",
      redirect: "login"
    ,
    
      path: "login",
      component: Login
    ,    
  ]
);

经过更多的摆弄，我在路由路径上添加了一个正斜杠，然后我又看到了我的登录页面，如下所示：

const router = new Router(
  routes: [
    
      path: "/",
      redirect: "login"
    ,
    
      path: "/login",
      component: Login
    ,    
  ]
);