没有域名，一个服务器Nginx怎么部署多个前端项目

news/2024/7/7 19:30:34

因为没有域名，所以用路径来作区分，

主项目：直接根路由访问该项目，与正常配置无任何差别
从项目：此处设置/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，就能正常访问了，记得两个前端项目都用同一个接口哈