如何使用Nginx部署Nuxt3项目

使用Nginx部署Nuxt3项目

1. 安装Nginx稳定版 nginx.org/en/download…

2. 项目打包

   pnpm nuxt generate //预渲染应用中的所有页面，生成对应的静态 HTML 文件
   pnpm preview //最后输入 y
   

3. 项目目录出现.output文件夹

4. 在下载好的Nginx文件夹中新建文件夹，命名为自己的项目名:myProject，

5. 复制项目里的.output文件夹下public文件夹到新建的文件夹中

6. 打开Nginx文件夹下的conf文件夹，nginx.conf文件

7. 使用编辑器打开，修改配置

   server {
           listen       8080;//自定义端口号
           server_name  localhost;
   ​
           #charset koi8-r;
   ​
           #access_log  logs/host.access.log  main;
   ​
           location / {
               root   myProject; //刚才在nginx新建的文件夹 myProject
               index  index.html index.htm;
           }
           //项目中后端地址的代理
           location /api {
               proxy_pass http://xxx.xxx.x.xxx:8080/; //末尾要有/
           }
           //项目中后端地址的代理
           location /api2 {
               proxy_pass http://xxx.xxx.x.xxx:8082/user/; //末尾要有/
           }
    }
   

8. 启动Nginx ---双击Nginx.exe

9. 查看Nginx是否启动成功，任务管理器中查看

10. 关闭Nginx，在任务管理器中终止任务，会有多个Nginx任务，都终止完！

补充

使用build命令和 nuxt generate 命令的区别：可见此文

blog.csdn.net/qq_17335549…

www.shiniest.cn/blog/articl…