nginx部署vite4+vue3项目(解决所有遇到的问题!同一个nginx部署多个项目、页面空白问题、页面刷新404问题、在vite.config.js中配置跨域代理访问不了后端接口问题等等)

前言

还是那句话,学有所感,记录如下。

一、下载nginx

进入nginx官网直接下载即可:http://nginx.org/en/download.html

选择稳定版,我这里选择windows来演示:
nginx部署vite4+vue3项目(解决所有遇到的问题!同一个nginx部署多个项目、页面空白问题、页面刷新404问题、在vite.config.js中配置跨域代理访问不了后端接口问题等等)_第1张图片

下载完成之后,解压,进入nginx-1.24.0 文件夹中,nginx目录如下:

nginx部署vite4+vue3项目(解决所有遇到的问题!同一个nginx部署多个项目、页面空白问题、页面刷新404问题、在vite.config.js中配置跨域代理访问不了后端接口问题等等)_第2张图片
主要文件目录介绍如下:

conf:nginx的一些配置文件
html:前端的打包文件主要放在这个地方
logs:日志文件存放目录
nginx.exe:用来启动nginx的程序

我们启动测试一下nginx是否能够正常使用,双击运行即可启动。不过程序会一闪而过,不太友好,我们这里通过命令行的方式进行启动。

通过命令行进入nginx.exe所在目录,如图:
nginx部署vite4+vue3项目(解决所有遇到的问题!同一个nginx部署多个项目、页面空白问题、页面刷新404问题、在vite.config.js中配置跨域代理访问不了后端接口问题等等)_第3张图片

进入cmd命令行界面:
nginx部署vite4+vue3项目(解决所有遇到的问题!同一个nginx部署多个项目、页面空白问题、页面刷新404问题、在vite.config.js中配置跨域代理访问不了后端接口问题等等)_第4张图片

输入命令启动nginx:

start nginx

不报错说明启动成功,如图:
nginx部署vite4+vue3项目(解决所有遇到的问题!同一个nginx部署多个项目、页面空白问题、页面刷新404问题、在vite.config.js中配置跨域代理访问不了后端接口问题等等)_第5张图片

在浏览器输入localhost,显示如下页面说明能够正常启动:
nginx部署vite4+vue3项目(解决所有遇到的问题!同一个nginx部署多个项目、页面空白问题、页面刷新404问题、在vite.config.js中配置跨域代理访问不了后端接口问题等等)_第6张图片

二、同一个nginx部署多个项目

视频地址:https://www.bilibili.com/video/BV1fG4y1a7Sv/?spm_id_from=333.337.search-card.all.click&vd_source=5f425e0074a7f92921f53ab87712357b

这里虽然只是演示了两个最简单的页面,但是复杂的项目的部署流程也是类似的。

三、页面空白问题

文章地址:https://blog.csdn.net/qq_42071369/article/details/128379046

看这部分的配置即可:
nginx部署vite4+vue3项目(解决所有遇到的问题!同一个nginx部署多个项目、页面空白问题、页面刷新404问题、在vite.config.js中配置跨域代理访问不了后端接口问题等等)_第7张图片

三、页面刷新404问题

上面的文章中其实已经讲了,加下面一句话即可,具体的路径取决于项目本身:

try_files  $uri $uri/ /xxxxx/index.html;   #解决刷新404

四、在vite.config.js中配置跨域代理访问不了后端接口问题

vite.config.js如何配置跨域以及解释,请看这篇文章:https://blog.csdn.net/weixin_45750972/article/details/127223955

在nginx.conf中的配置请看这篇文章:https://www.cnblogs.com/dengsheng/p/16778586.html

这里要注意的一点就是,/api和后端地址最后加不加/,取决于自己的项目有没有加,如果项目如图:
nginx部署vite4+vue3项目(解决所有遇到的问题!同一个nginx部署多个项目、页面空白问题、页面刷新404问题、在vite.config.js中配置跨域代理访问不了后端接口问题等等)_第8张图片

那配置文件中也不需要加/,反正如果访问不了的话,你就加上或者去掉,来回尝试即可!

注意

如果页面中有二级路由的话,配置文件中一定不能用root,要用alias.

最后我们配置文件如下:

server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;
		# 这个代理和项目无关
        location / {
            root   html;
            index  index.html index.htm;
        }
		
		# 代理自己的项目
		location /cees-client {
			alias	html/cees-client;
			index	index.html;
			# autoindex on;
			try_files  $uri $uri/ /cees-client/index.html;   #解决刷新404
		}
		
		# 配置代理vite中的跨域
		location /client {
			proxy_pass	http://43.136.31.72:7804;
		}
	}

你可能感兴趣的:(vue等前端知识,nginx,javascript,运维,vue)