vue项目nginx部署子目录vue 多项目部署二级目录 copy
新项目:同一域名下部署多个vue项目, 根目录vue项目不需要按下面的方式进行打包部署
https://www.xxxx.com/
1
下面三个项目以二级目录部署
https://www.xxxx.com/hmange
https://www.xxxx.com/api
https://www.xxxx.com/restful
1
2
3
2
3
以上链接不可用,作为示例,不要点击。此方法适用于多vue项目,二级目录部署
server {
listen 80;
server_name www.bytedit.com;
access_log /var/log/nginx/bytedit.access.log;
error_log /var/log/nginx/bytedit.error.log;
location ^~/ {
alias /usr/local/nginx/html/front/;
try_files $uri $uri/ /index.html;
index index.html;
}
location ^~/hmanage {
alias /usr/local/nginx/html/hmanage/;
try_files $uri $uri/ /hmanage/index.html;
index index.html;
}
location ^~/restful {
alias /usr/local/nginx/html/restful/;
try_files $uri $uri/ /restful/index.html;
index index.html;
}
location ^~/api {
alias /usr/local/nginx/html/api/;
try_files $uri $uri/ /api/index.html;
index index.html;
}
location /profile/image {
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://127.0.0.1:8081/profile/image;
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
前端在打包静态文件的时候需要进行以下修改:
1、在vue.config.js
配置文件中,publicPath
和 outputDir
都改为 '/子目录名/'。
2、入口文件 index.html
的head
标签内加入
<meta base="/子目录名/">
<!-- 例如: -->
<meta base="/hmanage/">
1
2
3
2
3
3、vue-router
路由文件的配置,填写二级目录
文件路径:src/router/index.js
base: '/子目录名/',
<!-- 例如 -->
新增 base:'/hmanage/',
1
2
3
2
3
4、nginx 配置以及前端资源根目录
location ^~/hmanage {
alias /usr/local/nginx/html/hmanage/;
try_files $uri $uri/ /hmanage/index.html;
index index.html;
}
1
2
3
4
5
2
3
4
5
上次更新: 2024/01/30, 00:35:17
- 01
- Node与GLIBC_2.27不兼容解决方案08-19
- 02
- Git清空本地文件跟踪缓存08-13