Nginx同一个端口部署多个vue项目
Nginx同一个端口部署多个vue项目,亲测有效
·
先看效果
app1
浏览器输入192.168.66.66:10000/app1
访问app1
app2
浏览器输入192.168.66.66:10000/app2
访问app2
配置方法
1. 前台代码更改3个地方
- 发网络请求的路径加固定前缀, 如:testurl #注意如果还在开发阶段,需要更改vue.config.js的代理配置
- 前端路由base固定前缀路径 app1
- 前端项目的虚拟项目名 app1
# 注意:路由固定路径和虚拟项目名必须一致
2. 配置 nginx 网络请求的转发 前台地址重定向
示例1
src\libs\api.request.js 改网络请求统一前缀
vue.config.js 配置开发时代理
src\router\index.js 改路由base固定前缀
vue.config.js 配置前端虚拟项目名
1. 前台代码更改配置
src\libs\api.request.js
改网络请求统一前缀testurl
const baseUrl = '/testurl'
vue.config.js
配置开发时代理,保证开发时也能正确访问到后台testurl
devServer: { proxy: { '/testurl/api': { target: 'http://10.111.43.12:8090/', pathRewrite: { '^/testurl/api': '/' } } } }
src\router\index.js
改路由base固定前缀app1
Vue.use(Router) const router = new Router({ base: 'app1', routes, mode: 'history' })
vue.config.js
配置前端虚拟项目名/app1/
const BASE_URL = '/app1/' publicPath: BASE_URL,
2. nginx 配置
server {
listen 10000;
server_name localhost;
add_header Set-Cookie "HttpOnly";
add_header Set-Cookie "Secure";
add_header X-Frame-Options "SAMEORIGIN";
#此配置可省略,仅仅是为了输入10.111.43.12:10000 时有个默认首页
location / {
root html/;
index index.htm index.html;
}
# 前台页面重定向 ,不能配置root alias ;记得把dist下的内容外移一层
location ^~ /app1/ {
try_files $uri $uri/ /app1/dist/index.html;
}
location ^~ /app2/ {
try_files $uri $uri/ /app2/dist/index.html;
}
# 网络配置转发到网关
location /cxyxcwdzurl/api/ {
proxy_pass http://localhost:8090/;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header REMOTE-HOST $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}
3. 服务器前台打包放置路径
html下面建立app1
文件夹,将打包好的dist.zip 解压到app1下面
最最最重要的是:必须把dist目录下的内容拷贝到 app1
目录,否则访问报错forbidden
cd /usr/local/nginx/html/app1
cp -r dist/* ./
app2部署方式,和app1类似,触类旁通,聪明的你,肯定已经学会了!
脚下留心
我也是摸石头过河,一个一个坑踩过来的,用了最最简陋的配置办法进行配置;
如有其他优化配置办法,期待您的分享。
1206157433@qq.com
更多推荐
已为社区贡献1条内容
所有评论(0)