页面无法在路由器模式下加载：Apache 上的历史记录

Question

我想从应用程序的 URL 中删除哈希 (#)：

~~http://localhost/CoreUI-Vue/Vue_Starter/dist/#/dashboard~~ http://localhost/CoreUI/Vue_Starter/dist/dashboard

所以我已经将vue-router mode选项从hash更改为router/index.js history ：

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  mode: 'history',

但之后，当我重新编译源代码（ npm run build ）并打开应用程序（ http://localhost/CoreUI/Vue_Starter/dist/dashboard ）时，它加载了一个空页面：

<body class="app header-fixed sidebar-fixed aside-menu-fixed aside-menu-hidden">
<!---->
<script type="text/javascript" src="./static/js/manifest.7c717a1bcc0cc7dc29c1.js"></script>
<script type="text/javascript" src="./static/js/vendor.dfb9d96e757ce802aece.js"></script>
<script type="text/javascript" src="./static/js/app.1cbf93c84add6c85b943.js"></script>
</body>

而带有mode: 'hash' ( http://localhost/CoreUI/Vue_Starter/dist/#/dashboard ) 的路由器可以http://localhost/CoreUI/Vue_Starter/dist/#/dashboard加载应用程序：

<body class="app header-fixed sidebar-fixed aside-menu-fixed aside-menu-hidden">
<div class="app">
    (...app content...)
</div>
<script type="text/javascript" src="./static/js/manifest.a2cf3e09f095de958e46.js"></script>
<script type="text/javascript" src="./static/js/vendor.dfb9d96e757ce802aece.js"></script>
<script type="text/javascript" src="./static/js/app.72b651a6c3b2660db094.js"></script>
</body>

我意识到必须为 Web 服务器提供额外的配置才能使其工作，但它仍然没有帮助我。

在 Apache 的配置httpd.conf我确保打开了 mod_rewrite：

LoadModule rewrite_module modules/mod_rewrite.so

我在.htaccess提供了对历史路由器的支持（从vue-router docs复制）：

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

.htaccess与项目的index.html位于同一文件夹中。

我正在研究使用最流行的Webpack/Vue 样板的空CoreUI-Vue模板，所以我的代码或配置没有什么特别之处。

Answer 1

我看到你使用生产版本。 我认为您应该在 Apache 配置中添加 VirtualHost 以具有像在生产环境中一样的路径：

<VirtualHost *:80>
    DocumentRoot "c:\path_to_dist"

    ServerName servername.localhost
</VirtualHost>

并添加到/etc/hosts (Linux) 或c:\\Windows\\system32\\drivers\\etc\\hosts (Windows)：

127.0.0.1 servername.localhost

我更喜欢这种方式，因为您可以使用任何框架手册中的每个.htaccess配置而无需额外编辑，并且您没有任何路径问题。

当然，如果你不想要这个解决方案，你可以将.htaccess编辑为这样的：

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . CoreUI/Vue_Starter/dist/index.html [L]
</IfModule>

我不确定这是否有效（多年来没有使用 Apache），但我确定您必须编辑最后一个RewriteRule或RewriteBase 。

页面无法在路由器模式下加载：Apache 上的历史记录

问题描述

1 个解决方案

解决方案1
1 已采纳 2017-10-26 17:08:45

页面无法在路由器模式下加载：Apache 上的历史记录

问题描述

1 个解决方案

解决方案1 1 已采纳 2017-10-26 17:08:45

解决方案1
1 已采纳 2017-10-26 17:08:45