本文介紹使用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 到文件系統路徑的情況。
到此為止，你已經可以在同一域名下通過路徑區分來部署多個前端項目了，希望本文可以幫到你，有任何問題可在評論區留言。
