页面未找到“/”路由

Posted 2023-02-22

【中文标题】页面未找到“/”路由

【英文标题】：Page not found "/" route

【发布时间】：2018-06-26 08:19:05

【问题描述】：

我正在尝试使用 Nuxt 设置 VueJS 应用程序进行服务器端渲染。但是，在部署到我的服务器后，index.vue 会返回 404 Page not found 错误。

在我的开发机器上运行时不会发生这种情况，即使在我的服务器上以开发模式运行时仍然会发生这种情况。

所有其他路线都可以正常工作，并且从应用程序本身获取索引路线也可以正常工作。它只是在刷新时不加载。例如：

http://myapp.com/ 不起作用

http://myapp.com/login 工作正常

我的页面文件夹目前如下所示：

- pages
-- index.vue
-- login.vue

我的 nuxt.config 文件中没有任何花哨的设置，并且与Auth0 example 中描述的设置几乎相同

在我的服务器上，我使用命令 pm2 start npm --name "my-app" -- start 运行 nuxt，它运行良好，没有任何错误，并且我有以下 .htaccess 配置：

RewriteCond %HTTP_HOST ^my-app\.com$ [OR]
RewriteRule ^(.*) "http\:\/\/127\.0\.0\.1\:3000\/$1" [P,L]

这是我得到的错误屏幕：

该页面本身目前非常基本，它确实有更多内容但是我已将其缩减为以下尝试调试此问题：

<template>
    <v-container grid-list-md>
       <v-layout row wrap>
           <h1>Test index, trying to fix the 404</h1>
           <h2>Hello,  loggedUser ? loggedUser : 'friend' !</h2>
       </v-layout>
   </v-container>
</template>

<script>
 import  mapGetters  from 'vuex'

 export default 
   computed: mapGetters([
     'isAuthenticated',
     'loggedUser'
   ])
 
</script>

【参考方案1】：

我似乎已经设法解决了这个问题。但是，我不完全确定修复涉及修改我的.htaccess 的原因。我开始使用这些设置并最终得到以下效果很好（至少现在）。

RewriteCond %HTTP_HOST ^my-app\.com$
RewriteRule "(.*\.(jpg|gif|png|svg|js|css))$" "http://127.0.0.1:3000/$1" [P,NC]
RewriteRule ^(.*) "http\:\/\/127\.0\.0\.1\:3000\/$2" [P,L]

jpg|gif 等规则是必需的，因为它们在使用第二条规则时不会加载。