部署 vue 应用程序后，只有主页有效，找不到子页面

Question

我已经从 cPanel 创建了一个子域 test.example.com。然后我使用

构建了我的 Vue 应用程序

npm run build

并压缩了整个 dist 文件夹以上传到服务器。上传后，我展开了 zip 文件，这样文件就在服务器上了。

这非常适合我的主页，但是，请检查任何子页面 return 404，而此问题在本地主机上是观察不到的。

我不知道如何解决这个问题。

我用vue.config.js和

module.exports = {
    publicPath: '/'
}

而且子页面的链接看起来不错，但就是不起作用。

Answer 1

您正在路由器中使用 history mode，为了使其正常工作，所有请求都需要返回到 index.html

All you need to do is add a simple catch-all fallback route to your server. If the URL doesn't match any static assets, it should serve the same index.html page that your app lives in.

由于您使用的是 cPanel，因此我假设您的服务器使用的是 Apache。

因此您需要创建一个 .htaccess 文件以将所有请求重定向到 index.html。您需要在 public_html 文件夹中创建 .htaccess 文件（假设这是您的应用程序代码所在的位置）。然后添加以下内容。

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

部署 vue 应用程序后，只有主页有效，找不到子页面

After deployment of vue app only homepage works, subpages not found

apache

vue.js

web-deployment