Vue3 部署 nginx 服务器，遇到的陷阱 ......

下载nginx 

首先下载nginx，解压后如下：

 Vue打包

首先找到config配置

 

选择生产环境

找到配置，BASE_API此处要和nginx配置时保持一致 

 

在控制终端使用npm run build 打包项目

我的package.json下配置如下，使用 npm run build:prod 进行打包

 打包完成后会多出dist文件夹

nginx配置 

把dist文件夹拷贝放入html目录下。我是先把html目录下的内容删除，直接把dist里面的内容放进了html下，如图：

也可以自行去配置文件进行配置 

然后进入conf目录下的nginx.conf配置文件中进行配置

 

 然后启动nginx就可以访问项目了，不推荐使用该程序启动nginx，任务管理器关闭nginx，因为可能会导致缓存问题，从而导致更改的配置文件不生效。

在终端使用命令的方式启动nginx、关闭nginx可以解决缓存问题

然后就可以访问项目了......