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

要在Nginx中部署Vite 4+ Vue 3项目，你需要确保Vite项目已经构建并且Nginx配置正确。以下是部署的基本步骤和示例配置：

1. 构建Vite项目：

   在项目根目录运行构建命令：

   
   
   
   npm run build

   或者如果你使用的是yarn：

   
   
   
   yarn build

2. 将构建后的内容移动到Nginx的服务目录：

   通常构建后的内容会在项目目录的dist文件夹中，你需要将这个文件夹的内容移动到Nginx的服务目录下，例如/usr/share/nginx/html。

3. 配置Nginx：

   编辑Nginx的配置文件，通常这个文件位于/etc/nginx/conf.d/default.conf或者/etc/nginx/sites-available/your_site。

   以下是一个基本的Nginx配置示例，确保更改root指令指向你的构建输出目录：

   
   
   
   server {
       listen 80;
       server_name your-domain.com; # 你的域名或IP
    
       root /path/to/your/dist;     # 指向Vite构建的dist目录
       index index.html;
    
       location / {
           try_files $uri $uri/ /index.html;
       }
   }

4. 重启Nginx服务：

   
   
   
   sudo systemctl restart nginx

确保你的安全组和防火墙设置允许80端口（或你选择的端口）的流量。

如果你遇到了跨域问题，确保在Vite配置文件中正确设置了vite.config.js中的base选项，并在Nginx配置中适当地设置了proxy。

如果你的Vite项目使用了history模式，确保Nginx配置中有正确的重写规则来处理路由。

如果你在部署过程中遇到其他问题，请确保检查Nginx的错误日志，它通常可以提供问题的线索。