本文介绍使用nginx服务器在同一个域名下如何部署多个前端项目，在vue3使用vite打包时配置文件vite.config.ts中的base的配置方式，以及vue-router中history的配置方式，以及如何在nginx中配置才能使前端项目正常解析等关键步骤，结束你在前端项目部署时的苦恼。
项目场景描述
- 假设你有一个域名admin.iicoom.fun
- 现在有两个前端项目，普通的前端多页面项目project1和vu3单页面项目project2
project1想要通过这个路径访问 https://admin.wonima.online
project2想要通过这个路径访问 https://admin.wonima.online/spa那么项目project2应该如何打包呢？
nginx该如何配置？
project2打包
如果是vue3配置vite.config.js的base属性如下
export default defineConfig({
base: '/spa/',
})如果是vue2可能需要配置publicPath
module.exports = {
publicPath: '/spa/',
}这样打包好的静态文件路径就是下面的这个样子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/spa/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>project2</title>
<script type="module" crossorigin src="/spa/assets/index-6bdda20d.js"></script>
<link rel="stylesheet" href="/spa/assets/index-bcd8eda7.css">
<link rel="manifest" href="/spa/manifest.webmanifest"></head>
<body>
<div id="app"></div>
</body>
</html>如果你使用了vue-router，并且history使用了h5 history模式，需要在router中配置：
const router = createRouter({
history: createWebHistory('/spa/'),
routes: [
...
]
})nginx 配置
server {
client_max_body_size 5M;
listen 443 ssl;
server_name admin.wonima.online;
ssl_certificate /etc/nginx/ssl/xxx_cert_chain.pem;
ssl_certificate_key /etc/nginx/ssl/xxx.key;
location / {
root /data/project1;
index index.html;
}
location /spa {
alias /data/project2/dist/;
try_files $uri $uri/ /spa/index.html; # h5 history模式需要这样写
}
location /vue {
alias /data/prject3/dist; # hash 模式
}
}注意到location /spa 使用的是alias了吗，如果你使用了root应该无法正常解析。
选择使用 root 还是 alias 主要取决于你的具体需求和服务器配置。通常，root 更适合一般的网站结构，而 alias 更适用于需要直接映射 URL 到文件系统路径的情况。
到此为止，你已经可以在同一域名下通过路径区分来部署多个前端项目了，希望本文可以帮到你，有任何问题可在评论区留言。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。