页面无法通过路由器模式加载：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) 的路由器加载应用程序没有问题：

<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.

位于同一文件夹中

我正在处理空 CoreUI-Vue template which uses most popular Webpack/Vue boilerplate，所以我的代码或配置没有什么特别之处。

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 上的历史记录

Page doesn't load with router mode: history on Apache

javascript

apache

.htaccess

vue.js

vue-router