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

Question

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

Answer 1

我将向您展示如何做到这一点，但在阅读vue.js 文档之前

步骤 1 运行以下命令

npm run build

Step 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 运行它。

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

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

Answer 2

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

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

如果 Apache 版本高于 2.2，您可以在 apache 配置中使用后备资源而不是 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模式，这里是如何设置主机的官方文档，至于您，index.html您可以在项目根目录而不是dist文件夹中找到它