部署 vue js 应用程序并在路由中收到 404 错误

Question

我正在使用简单的 webpack，但是在将我的应用程序部署到托管服务器后，我的索引页面工作正常，但其他页面出现 404 错误。请我不知道是否有人知道发生了什么。简单的 webpack 仅生成构建js 文件，仅此而已，我的 dist 文件夹中没有 index.htm 文件c

Answer 1

我将向你展示如何做到这一点，但在阅读之前this from vue.js docs

第 1 步 运行以下命令

npm run build

第 2 步 复制 dist 文件夹并放到一个新文件夹中

第 3 步 在新文件夹中创建一个新文件并将其命名为 .htaccess

第 4 步 在 .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>

现在您的应用程序已准备好部署！您甚至可以在本地机器上使用 apache 运行它。

请再次阅读docs，您可以在那里找到更多关于 nginx、node.js 的配置，并了解有关所有服务器配置的更多信息。

附加信息：我正在使用 laragon + apache，在第 4 步之后，我将新文件夹放在 Laragon 的 www 目录中，并与 Laragon 一起提供。我想您可以通过使用 xampp 或 wamp 将新文件夹放在 docs 目录中来做同样的事情。

Answer 2

这是由于你的 vue 路由器上的历史推送模式。

如果您使用 Apache，请按照以下步骤操作，否则您可以阅读 vuejs 文档https://router.vuejs.org/guide/essentials/history-mode.html：

如果 Apache 版本高于 2.2，您可以在 apache 配置中使用 Fallback ressource 而不是 mod_rewrite。它对我有用。

在 /etc/apache2/apache2.conf 中

<VirtualHost *:80>
    ServerName YourServerName(like yourwebsite.com)
    DocumentRoot /var/www/yourAppLocation/dist
    <Directory "/var/www/yourAppLocation/dist">
        FallbackResource /index.html
    </Directory>
</VirtualHost>

或者你可以使用经典的 mod_rewrite

<VirtualHost *:80>
    ServerName YourServerName(like yourwebsite.com)
    DocumentRoot /var/www/yourAppLocation/dist
    <Directory "/var/www/yourAppLocation/dist">
        <IfModule mod_rewrite.c>
           RewriteEngine On
           RewriteBase /
           RewriteRule ^index\.html$ - [L]
           RewriteCond %{REQUEST_FILENAME} !-f
           RewriteCond %{REQUEST_FILENAME} !-d
           RewriteRule . /index.html [L]
        </IfModule>
    </Directory>
</VirtualHost>

Answer 3

您需要将您的主机设置为将每个 404 错误路由到 index.html 并让 vue 处理错误，您使用的是哪个主机？如果您无法设置错误页面，您可以从路由器中删除mode:'history' 模式或改用hash 模式，here is the official docs to how to setup your host，至于您的index.html，您可以在项目根目录中找到它，而不是在dist 文件夹中