如何直接访问Vue路线

Question

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

我想在Vue路由器中使用历史记录模式，因此不必使用hashbang URL。 localhost:8080/#/login。

因此，我将模式设置为历史记录，如下所示：

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

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

  

无法获取/登录

根据Vue documentation，我应该将服务器配置为允许这样做。他们建议在我的设置中配置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时，会遇到相同的错误。

我想念什么吗？有人可以帮我解决这个问题吗？

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

Answer 1

.htaccess文件是Apache Web服务器的配置文件。 localhost:8080是开发服务器，不是由Apache运行，因此.htaccess文件未在其中使用。

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