先看效果

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


  1. src\libs\api.request.js 改网络请求统一前缀

  2. vue.config.js 配置开发时代理

  3. src\router\index.js 改路由base固定前缀

  4. vue.config.js 配置前端虚拟项目名


1. 前台代码更改配置

  1. src\libs\api.request.js 改网络请求统一前缀 testurl
const baseUrl = '/testurl'
  1. vue.config.js 配置开发时代理,保证开发时也能正确访问到后台 testurl
devServer: {
    proxy: {
      '/testurl/api': {
        target: 'http://10.111.43.12:8090/',
        pathRewrite: { '^/testurl/api': '/' }
      }
    }
  }
  1. src\router\index.js 改路由base固定前缀 app1
Vue.use(Router)
const router = new Router({
  base: 'app1',
  routes,
  mode: 'history'
})
  1. 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

Logo

前往低代码交流专区

更多推荐