基于wujie(无界)和 Nginx 同一端口下部署多个 Vue 项目
# 前言
前端多项目部署到 Nginx 的同一监听端口下的解决方案,项目由一个主项目和多个子项目组成,主项目和子项目都是单独打包。
主子项目之间是使用的腾讯开源的无界(WebComponent 容器 + iframe 沙箱)前端框架,能够完善的解决适配成本、样式隔离、运行性能、页面白屏、子应用通信、子应用保活、多应用激活、vite 框架支持、应用共享等。
官方文档:https://wujie-micro.github.io/doc (opens new window)
# 项目打包设置
在vite.config.js
文件中设置 `base 路径:
主项目 base 路径设置为默认即可'/':
export default defineConfig(({ command, mode }) => {
const env = loadEnv(mode, process.cwd());
return {
base:'/',
};
});
1
2
3
4
5
6
2
3
4
5
6
子项 base
路径设置为'/sub/':
export default defineConfig(({ command, mode }) => {
const env = loadEnv(mode, process.cwd());
return {
base:'/sub/',
};
});
1
2
3
4
5
6
2
3
4
5
6
Nginx.conf
配置
server {
listen 80;
server_name demo.com;
# 主项目
location / {
root /usr/web/main/;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
# 子项目
location /sub {
alias /usr/web/sub/;
try_files $uri $uri/ /sub/index.html last;
index index.html;
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# 注意
1、子项
base
设置的路径和Nginx.conf
配置的子项目监听路径不一致页面刷新会报如下错:Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.2、主项目
location
的是root
,而子项目中的是alias
;3、子项目
try_files index.html
需要配置前缀路径/sub
。
上次更新: 2024/01/30, 00:35:17
- 01
- Node与GLIBC_2.27不兼容解决方案08-19
- 02
- Git清空本地文件跟踪缓存08-13