Node.js前端程序通过Nginx部署后刷新出现404问题的解决办法

向右看齐 2022-01-29 23:55 489阅读 0赞

方案一 （这种方式容易被第三方劫持）

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 </td> 
 <td> <code>location / { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>root&nbsp;</code><code>/data/nginx/html</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>index index.html index.htm;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>error_page 404&nbsp;</code><code>/index</code><code>.html;</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

方案二

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 </td> 
 <td> <code>location / { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>root&nbsp;</code><code>/data/nginx/html</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>index index.html index.htm;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>if</code>&nbsp;<code>(!-e $request_filename) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>rewrite ^/(.*)&nbsp;</code><code>/index</code><code>.html last;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>break</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

方案三 （vue.js官方教程里提到的[https://router.vuejs.org/zh-cn/essentials/history-mode.html][https_router.vuejs.org_zh-cn_essentials_history-mode.html]）

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 </td> 
 <td> <code>server { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>listen 80;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>server_name localhost;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>root&nbsp;</code><code>/data/wwwroot/dist</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>location / { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>try_files $uri $uri/ @router;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>index index.html index.htm;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>location @router { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>rewrite ^.*$&nbsp;</code><code>/index</code><code>.html last;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

参考以下两位大神的博客：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 </td> 
 <td> <code>https:</code><code>//blog</code><code>.csdn.net</code><code>/u011025083/article/details/80352301</code> <code>https:</code><code>//www</code><code>.jianshu.com</code><code>/p/02ad1f919471</code> </td> 
 </tr> 
 </tbody> 
</table>

[https_router.vuejs.org_zh-cn_essentials_history-mode.html]: https://router.vuejs.org/zh-cn/essentials/history-mode.html