部署vue js应用程序并在路由中收到404错误 [英] Deploying vue js app and getting 404 error in routes

问题描述

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

解决方案

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

步骤 1运行以下命令

npm 运行构建

<块引用>

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

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

第 4 步在.htaccess文件中插入以下代码

重写引擎开启重写基数/重写规则 ^index\.html$ - [L]RewriteCond %{REQUEST_FILENAME} !-fRewriteCond %{REQUEST_FILENAME} !-d重写规则./index.html [L]</IfModule>

<块引用>

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

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

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

I am using a webpack simple but after deploying my app to an hosting server my index page works fine but other pages gives a 404 error .Please i dont know if anyone have any idea what is happening .The webpack simple only generate build js file for me and thats all, i dont get an index.htm file in my dist folderc

解决方案

I am going to show you how to do it but before read this from vue.js docs

Step 1 Run the following command

npm run build

Step 2 Copy the dist folder and put it in a new folder

Step 3 In the new folder create a new file and name it .htaccess

Step 4 Inside .htaccess file insert the following code

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

Now you application is ready to deploy!You can even run it using apache on local machine.

Please again, read docs you can find more configurations there for nginx, node.js and learn more about all server configurations.

Additional info: I am using laragon + apache and after the step 4, I put the new folder inside www directory of Laragon, and serve it with Laragon. I guess you can do the same by using xampp or wamp by putting the new folder in docs directory.

这篇关于部署vue js应用程序并在路由中收到404错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！