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

【问题标题】：Blank page with vue-router with history mode and production带有历史模式和生产的 vue-router 的空白页面
【发布时间】：2018-05-17 06:35:13
【问题描述】：

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

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

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

谢谢。

【问题讨论】：

标签： webpack vue.js 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空白页问题的第一个stackoverflow链接，我想我会分享我的经验。

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

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

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

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

【讨论】：