在vue路由器历史记录模式下页面重新加载404错误

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

我在ubuntu(apache2服务器)上部署了vue cli项目更改vue路由器模式后,除索引外,所有页面在重新加载时均显示404页。

我将.htaccess添加到了index.html所在的/ dist路径,但仍然无法正常工作我不知道还有什么办法解决这个问题。有人知道吗?

这是我的项目dist文件夹

/home/admin/web/mali-nali.com/public_html/dist

。htaccess代码在dist中

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

这是htacccess.madewithlove.be调试信息

RewriteEngine On    RewriteEngine was now turned on
2   RewriteBase /   Using / as the base for the rewrites.
3   RewriteRule ^index\.html$ - [L] This rule was not met.
4   RewriteCond %{REQUEST_FILENAME} !-f This condition was met.
5   RewriteCond %{REQUEST_FILENAME} !-d This condition was met.
6   RewriteRule . /index.html [L]   The new url is https://mali-nali.com/index.html
The tests are stopped because of the L in your RewriteRule options.

所有不存在的页面的最后一条路线

{path: '/*',component:FourohFour, name:'404'}
apache .htaccess vue.js vue-router
2个回答
0
投票

来自https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations

注意:以下示例假定您正在从根文件夹提供应用程序。如果部署到子文件夹,则应使用Vue CLI的publicPath选项和路由器的相关基础属性。

似乎是您所缺少的。


0
投票

在您的Vue项目的根目录中,添加一个名为vue.config.js的文件,其代码如下。

module.exports = {
 publicPath: process.env.NODE_ENV === 'production' ? '/mali-nali.com/' : '/'
}

然后仍然在Vue项目的根目录中,添加一个名为404.html的文件,并带有以下代码。

<!DOCTYPE html>
 <html>
  <head>
    <script>         
        sessionStorage.redirect = location.href;
    </script>
    <meta http-equiv="refresh" content="0;URL='/mali-nali.com/'">
  </head>
 </html>

然后将您创建的404.html文件复制到/ dist文件夹中。希望对您有所帮助。

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