我如何设置htaccess文件以在VueJS中启用历史记录模式?

问题描述 投票:0回答:1

我想在我的VueJS应用中启用历史记录模式,因此我的URL不包含#。例如https://www.mybusiness.com/#/articles

当启用历史记录模式时,它会删除#,但是我无法直接访问url,例如https://www.mybusiness.com/articles,因为它返回404错误。

研究告诉我,我需要编辑.htaccess文件以包括以下内容:(如VueJS文档所建议)

<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文件中-如果尝试登录到我的应用程序,则会显示'未启用JavaScript'

如何正确设置我的.htaccess文件,以允许在VueJS中使用历史记录模式并仍然启用JavaScript?

我的.htaccess文件:

RewriteEngine on
  RewriteCond %{SERVER_PORT} !^443$
  RewriteRule ^.*$ https://%{SERVER_NAME}%{REQUEST_URI} [L,R=301]

<IfModule mod_rewrite.c>
    <IfModule mod_negotiation.c>
      Options -MultiViews -Indexes
    </IfModule>

    RewriteEngine On

    # Handle Authorization Header
    RewriteCond %{HTTP:Authorization} .
    RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]

    # Redirect Trailing Slashes If Not A Folder...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} (.+)/$
    RewriteRule ^ %1 [L,R=301]

   # Handle Front Controller...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.php [L]

   RewriteBase /
    RewriteRule ^index.html$ - [L]
  # RewriteRule . /index.html [L]

 </IfModule>

使用上面的代码我没有获得未启用javascript的错误,但我尝试访问直接URL却获得404错误

如果我取消第二行RewriteRule . /index.html [L]的注释,那么我会得到两个错误,都说Uncaught SyntaxError: Unexpected token '<'并且我的应用无法加载。

我的共享托管帐户的public_html文件夹中有我的应用程序。我刚刚将构建的dist文件夹的内容复制到了这个public_html文件夹中。

我不确定我的错误是否与最后一行注释不正确的html有关,但不确定。

apache .htaccess vue.js
1个回答
0
投票

问题是为我的前端服务的index.html和为我的后端api服务的index.php的重写规则之间的冲突。

为了修复它,我在index.php的RewriteRule之前插入了这一行。这样可以克服冲突,并且可以正常工作。

RewriteCond %{REQUEST_URI} ^/api/

© www.soinside.com 2019 - 2024. All rights reserved.