前端项目部署nginx代理

Vue3 + Vite 项目部署到 Nginx 的配置方案

根据你的需求,你需要将多个 Vue3 + Vite 项目部署到同一个 Nginx 服务器上,并且希望通过不同端口或路径访问不同项目。以下是几种配置方案:

方案一:通过不同路径访问不同项目(共享端口)

假设你的项目结构如下:

  1. /mydist/- 第一个项目
  2. /mydemo/- 第二个项目
  3. /mylist/- 第三个项目

Nginx 配置示例:

js 复制代码
 server {
    listen 80;
    server_name your-domain.com;
     # 第一个项目 - mydist
    location /mydist/ {
        alias /path/to/your/mydist/;
        try_files $uri $uri/ /mydist/index.html;
    }

    # 第二个项目 - mydemo
    location /mydemo/ {
        alias /path/to/your/mydemo/;
        try_files $uri $uri/ /mydemo/index.html;
    }

    # 第三个项目 - mylist
    location /mylist/ {
        alias /path/to/your/mylist/;
        try_files $uri $uri/ /mylist/index.html;
    }
}
注意事项​:

确保每个 Vue 项目的 vite.config.js中设置了正确的 base

js 复制代码
// mydist 项目的配置
export default defineConfig({
  base: '/mydist/',
  // 其他配置...
})

方案二:通过不同端口访问不同项目

js 复制代码
# 第一个项目 - mydist (端口 8001)
server {
    listen 8001;
    server_name your-domain.com;

    location / {
        root /path/to/your/mydist;
        try_files $uri $uri/ /index.html;
    }
}

# 第二个项目 - mydemo (端口 8002)
server {
    listen 8002;
    server_name your-domain.com;

    location / {
        root /path/to/your/mydemo;
        try_files $uri $uri/ /index.html;
    }
}

# 第三个项目 - mylist (端口 8003)
server {
    listen 8003;
    server_name your-domain.com;

    location / {
        root /path/to/your/mylist;
        try_files $uri $uri/ /index.html;
    }
}
注意事项​:

这种情况下,Vue 项目的 base可以设置为 /

js 复制代码
export default defineConfig({
  base: '/',
  // 其他配置...
})

访问方式:

  1. mydist: http://your-domain.com:8001
  2. mydemo: http://your-domain.com:8002
  3. mylist: http://your-domain.com:8003

Nginx 中 rootalias的区别与使用场景

rootalias都是 Nginx 中用于指定文件系统路径的指令,但它们的工作方式有重要区别。

主要区别

特性 root alias
路径处理 会将 location部分追加到路径后 完全替换 location部分
结尾斜杠 通常不需要 必须与 location匹配
使用场景 一般目录 需要精确映射的特殊目录

root的工作方式

js 复制代码
location /static/ {
    root /var/www/html;
}

当访问 /static/image.jpg时,Nginx 会查找:

js 复制代码
/var/www/html/static/image.jpg

注意:root会将完整的 URI 路径(包括 location部分)追加到指定的目录后。

alias的工作方式

js 复制代码
location /static/ {
    alias /var/www/static_files/;
}

当访问 /static/image.jpg时,Nginx 会查找:

js 复制代码
/var/www/static_files/image.jpg

注意:alias会用指定的路径完全替换 location部分

重要注意事项

  1. 斜杠问题​:

    使用 alias时,locationalias的结尾斜杠必须一致

    正确:

    bash 复制代码
     location /static/ {
         alias /var/www/files/;
     }

    错误:

    bash 复制代码
     location /static {
         alias /var/www/files/;
     }
  2. 正则表达式 location ​: 在正则表达式 location 块中只能使用 alias,不能使用 root

  3. 性能考虑 ​: root通常比 alias稍微高效一点,因为少了一次路径替换操作,但在大多数情况下差异可以忽略不计

相关推荐
南玖i1 小时前
vue3 通过 Vue3DraggableResizable实现拖拽弹窗,可修改大小
前端·javascript·vue.js
excel1 小时前
Web发展与Vue.js导读
前端
YAY_tyy1 小时前
Three.js 开发实战教程(五):外部 3D 模型加载与优化实战
前端·javascript·3d·three.js
Zuckjet_4 小时前
开启 3D 之旅 - 你的第一个 WebGL 三角形
前端·javascript·3d·webgl
2401_863801464 小时前
探索 12 种 3D 文件格式:综合指南
前端·3d
珍宝商店6 小时前
前端老旧项目全面性能优化指南与面试攻略
前端·面试·性能优化
bitbitDown6 小时前
四年前端分享给你的高效开发工具库
前端·javascript·vue.js
gnip7 小时前
实现AI对话光标跟随效果
前端·javascript
脑花儿7 小时前
ABAP SMW0下载Excel模板并填充&&剪切板方式粘贴
java·前端·数据库
岁岁种桃花儿8 小时前
详解 Kubernetes 命令:kubectl exec -it nginx -- bash 及实战场景
运维·nginx·kubernetes