🎬 HoRain云小助手：个人主页
🔥 个人专栏: 《Linux 系列教程》《c语言教程》
⛺️生活的理想，就是为了理想的生活!
⛳️ 推荐
前些天发现了一个超棒的服务器购买网站，性价比超高，大内存超划算！忍不住分享一下给大家。点击跳转到网站。
专栏介绍
专栏名称 | 专栏介绍 |
《C语言》 | 本专栏主要撰写C干货内容和编程技巧，让大家从底层了解C，把更多的知识由抽象到简单通俗易懂。 |
《网络协议》 | 本专栏主要是注重从底层来给大家一步步剖析网络协议的奥秘，一起解密网络协议在运行中协议的基本运行机制！ |
《docker容器精解篇》 | 全面深入解析 docker 容器，从基础到进阶，涵盖原理、操作、实践案例，助您精通 docker。 |
《linux系列》 | 本专栏主要撰写Linux干货内容，从基础到进阶，知识由抽象到简单通俗易懂，帮你从新手小白到扫地僧。 |
《python 系列》 | 本专栏着重撰写Python相关的干货内容与编程技巧，助力大家从底层去认识Python，将更多复杂的知识由抽象转化为简单易懂的内容。 |
《试题库》 | 本专栏主要是发布一些考试和练习题库（涵盖软考、HCIE、HRCE、CCNA等） |
目录
⛳️ 推荐
专栏介绍
🌟 最常用方法：基于location配置（不需要多个域名）
🛠️ 配置步骤
🚀 Vue项目打包时的注意事项
💡 为什么需要这些修改？
🌈 一个实际例子
📌 小贴士
哈哈，说到Nginx配置多个项目用同一个端口，这可真是个实用技巧！我最近刚好在帮朋友解决这个问题，来给你分享一下最常用的几种方法，轻松搞定！
🌟 最常用方法：基于location配置（不需要多个域名）
这个方法最适合我们这些没有多个域名的开发者，只需要在Nginx配置文件里加几个location块就行。
🛠️ 配置步骤
打开Nginx配置文件（通常在
/etc/nginx/nginx.conf或/etc/nginx/conf.d/default.conf）添加配置，比如这样：
server { listen 80; server_name localhost; # 可以是你的IP或localhost # 项目1配置 location /project1/ { alias /path/to/project1/; index index.html; try_files $uri $uri/ /project1/index.html; } # 项目2配置 location /project2/ { alias /path/to/project2/; index index.html; try_files $uri $uri/ /project2/index.html; } }💡 小提示：
alias和root的区别是，root是"根路径+location路径"，而alias是直接指向指定路径。这里用alias更方便。
- 重启Nginx：
nginx -s reload🚀 Vue项目打包时的注意事项
如果你用的是Vue项目，打包前需要做些小调整：
- 修改vite.config.js（如果用Vite）：
export default defineConfig({ base: '/project1/', // 项目1的前缀 // ... })- 或者修改vue.config.js（如果用Vue CLI）：
module.exports = { publicPath: '/project1/' }- 打包后，把dist文件夹里的内容放到对应的文件夹里：
nginx/html/project1/ # 放项目1的dist文件 nginx/html/project2/ # 放项目2的dist文件💡 为什么需要这些修改？
因为Vue的路由默认是基于根路径的，加上前缀后，路由才能正确识别。比如你访问http://localhost/project1/home，Nginx会去/project1/目录找index.html，然后Vue路由会处理/home路径。
🌈 一个实际例子
假设我有俩Vue项目：
- 项目1：叫"blog"，路径
/project1/ - 项目2：叫"admin"，路径
/project2/
我需要：
- 在
vite.config.js里设置base: '/project1/' - 打包后把dist文件放进
/usr/share/nginx/html/project1/ - Nginx配置里设置
location /project1/指向这个文件夹
这样就能通过http://localhost/project1/和http://localhost/project2/访问两个项目啦！
📌 小贴士
- 访问时记得加斜杠哦，比如
http://localhost/project1/，不加斜杠可能会404 - 如果用history模式，一定要加上
try_files，否则会404 - 用hash模式的话，可以不用
try_files，像[7]里那样
需要我帮你检查下你的配置吗？或者你有具体的项目结构想分享？我们可以一起看看怎么配置最顺手！😄
❤️❤️❤️本人水平有限，如有纰漏，欢迎各位大佬评论批评指正！😄😄😄
💘💘💘如果觉得这篇文对你有帮助的话，也请给个点赞、收藏下吧，非常感谢!👍 👍 👍
🔥🔥🔥Stay Hungry Stay Foolish 道阻且长,行则将至,让我们一起加油吧！🌙🌙🌙
