Question

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

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一起提供。我想你可以通过将新文件夹放在docs目录中使用xampp或wamp来做同样的事情。

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文件夹

中

部署vue js app并在路由中获得404错误

3 个答案: