您现在的位置是:首页 >其他 >没有域名,一个服务器Nginx怎么部署多个前端项目网站首页其他
没有域名,一个服务器Nginx怎么部署多个前端项目
简介没有域名,一个服务器Nginx怎么部署多个前端项目
因为没有域名,所以用路径来作区分,
- 主项目:直接根路由访问该项目,与正常配置无任何差别
- 从项目:此处设置/new路径,为从项目,所有从项目访问路径均要加上/new
①修改Nginx配置文件
Nginx 配置文件如上所示
server {
listen 80;
server_name localhost;
location / {
root html/;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
location /new {
alias html/new/;
index index.html index.htm;
try_files $uri $uri/ /new/index.html;
}
}
②修改从项目
主要就是在项目中增加一个baseUrl,就是你自定义的路径,我这里是new
- vue.config.js
增加 publicPath: '/new/'
module.exports = {
lintOnSave: false, // 关闭eslint
publicPath: '/new/',
devServer: {
port: 80, // 端口号的配置
open: true, // 自动打开浏览器
proxy: {
'/api': {
target: 'http://127.0.0.1:8080/',
changeOrigin: true,
pathRewrite: {
'^/api': '/'
}
},
},
}
}
- index.html
增加 <meta base=/new/>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta base=/new/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
</head>
- router/index.js
增加 base: '/new/'
const router = new VueRouter({
base: '/new/',
routes: globalRoutes
})
================================
还有一点!!!!!!!
在从项目中,上述地方均改了以后,对于静态文件,使用url请求的,也要手动增加/new路径,要不然打开项目以后会 找不到资源。
例如我这里请求前端的地图资源数据,我是用前端地址+位置访问的,如果此处不改,上线后就会找不到静态资源
其实还有个办法,就是上线以后,哪个资源找不到,就回去改哪个,毕竟项目大可能也改不全,比如上线了,网站背景图没刷出来,F12查看,找不到,对一下路径发现错了,回去改即可
if (!this.mapData[arg.name]) {
const ret = await axios.get('http://99.199.199.99:80' + '/new/static/map/country/' + arg.name + '.json')
this.mapData[arg.name] = ret.data
this.$echarts.registerMap(arg.name, ret.data)
}
改了配置文件,和前端代码,docker重启Nginx,就能正常访问了,记得两个前端项目都用同一个接口哈
风语者!平时喜欢研究各种技术,目前在从事后端开发工作,热爱生活、热爱工作。