页面不使用路由器模式加载：Apache 上的历史记录答案

【问题标题】：Page doesn't load with router mode: history on Apache页面不使用路由器模式加载：Apache 上的历史记录
【发布时间】：2018-04-08 02:17:14
【问题描述】：

我想去掉应用 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>

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

在 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 模板，它使用最流行的Webpack/Vue boilerplate，所以我的代码或配置没有什么特别之处。

【问题讨论】：

目前没有服务器可以试用，但您的 RewriteBase 可能需要为 /CoreUI/Vue_Starter/dist/

标签： javascript apache .htaccess vue.js vue-router

【解决方案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。

【讨论】：