Javascript

vite vue vue3 在nginx 根目录或非根目录中部署后刷新404或空白问题解决

本文主要是介绍vite vue vue3 在nginx 根目录或非根目录中部署后刷新404或空白问题解决,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

问题:

当在nginx中部署多个前端工程时,且用 history 模式时,不刷新则以,一刷新页面就是奥利给白!

故,经过再次研究(之前就弄过,现在忘了。。。。。),给有这种问题的朋友出教学稳住,哈哈。。。

 

准备:

nginx 目录

nginx

  html

  v3ts

  sbin

  conf

  ......

 

vue3 工程中设置

0、.env.v3production

1、router/index.ts

 history:设置成history模式,设置 base (即 createWebHistory 参数):为设置为"你的文件夹名称"

 

或 根据环境 自己配置

 

 

 

2、

2.1、package.json

 

 

 

2.2、vite.config.ts

"base" ?"/你的文件夹名称/" : "/"

 

 

 

nginx中使用

3、nginx.conf

nginx.conf新增一个location /你的文件夹名称 {},注意非root需要改使用alias,最后要在里面新增一条try_files $uri $uri/ /你的文件夹名称/index. html;这个是解决刷新报404的问题。

 

 

 

 

参考

https://blog.csdn.net/weixin_42554373/article/details/116696898

这篇关于vite vue vue3 在nginx 根目录或非根目录中部署后刷新404或空白问题解决的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!