时间戳

首页 > 解决方案 > 如何直接访问 Vue 路由

mod-rewrite - 如何直接访问 Vue 路由

问题描述

我正在创建我的第一个Vue.js应用程序。

我想在我的 Vue 路由器中使用历史模式，所以我不必使用 hashbang URL，例如localhost:8080/#/login.

所以，我像这样将模式设置为历史，这很有效：

export default new Router({
    mode: 'history',
    routes: [...]
})

我的路线现在显示为localhost:8080/login. 但是，我无法使用此 URL 直接访问登录页面，因为当我刷新当前页面或尝试直接在浏览器的地址栏中键入该路由并按 Enter 时，我收到以下错误：

无法获取/登录

根据Vue 文档，我应该配置我的服务器以允许这样做。他们建议，对于我的设置，配置 Apache 并使用mod_rewrite.

因此，我创建了一个.htaccess包含以下mod_rewrite声明的文件：

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

但是当我尝试localhost:8080/login直接加载时，我得到了同样的错误。

我错过了什么吗？有人可以帮我解决这个问题吗？

我的应用程序的目录结构如下所示：

在此处输入图像描述

标签： mod-rewritevue.jsroutessingle-page-applicationvue-router

解决方案

.htaccess 文件是 Apache 网络服务器的配置文件。localhost:8080是一个开发服务器，不是由 Apache 运行的，所以该.htaccess文件不在那里使用。

开发服务器应该自动获取 url。如果没有，最可能的罪魁祸首是未正确设置的基本 url 或公共路径，或设置为生产变体。例如，如果您将其设置为/app/，则您必须访问localhost:8080/app/login才能访问您的登录页面。由于NODE_ENV设置了环境变量，您可以/为开发服务器设置公共路径，同时仍为生产构建保留自定义公共路径。

推荐阅读