Страница не загружается в режиме роутера: история на Apache

Question

Страница не загружается в режиме роутера: история на Apache

1

Я хотел избавиться от хеша (#) из URL-адреса приложения:

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

поэтому я изменил mode в vue-router из hash в history в router/index.js:

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 config 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 находится в той же папке, что и project index.html.

Я работаю над пустым шаблоном CoreUI-Vue, который использует наиболее популярные шаблоны Webpack/Vue, поэтому в моем коде или конфигурации нет ничего особенного.

van_folmert 26 окт. 2017, в 17:53

Источник

0

У вас нет сервера, чтобы попробовать это прямо сейчас, но вашему RewriteBase может потребоваться /CoreUI/Vue_Starter/dist/
Alex W 26 окт. 2017, в 16:28

Теги:

javascript

vue.js

vue-router

apache

.htaccess

1 ответ

Ещё вопросы

У вас нет сервера, чтобы попробовать это прямо сейчас, но вашему RewriteBase может потребоваться /CoreUI/Vue_Starter/dist/

Dawid Loranc · Accepted Answer · 2017-10-26T14-14-00.000Z

Я вижу, вы используете производство. Я думаю, вы должны добавить VirtualHost в конфигурацию Apache, чтобы иметь такие пути, как в рабочей среде:

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