域名子目录发布问题(nginx、vue-element-admin、uni-app)

域名子目录发布问题(nginx、vue-element-admin、uni-app)

说明

使用一个域名下子目录进行打包:

比如:

http://www.xxx.com/merchant 商户端代码

http://www.xxx.com/h5 移动端代码

http://www.xxx.com/api 接口地址

Vue-Element-Admin 代码打包

1, vue.config.js 中 配置:

javascript 复制代码
publicPath: process.env.NODE_ENV === "production" ? "/merchant/" : "/merchant/",

2, router/index.js 中:

javascript 复制代码
export default new Router({
  mode: 'history', // 去掉url中的#
  base: 'merchant',  //这里需要加子目录名称
  scrollBehavior: () => ({
    y: 0
  }),
  routes: constantRoutes
})

nginx配置:

powershell 复制代码
 server
  {
      #SSL 默认访问端口号为 443
      #listen 443 ssl; 
      listen 80;
      #请填写绑定证书的域名
      server_name www.xxx.com;    
     #web商户端页面
    location /merchant {
		# root 和 alias 区别,自行百度
  		alias /www/wwwroot/merchant;
	    index  index.html;
      try_files $uri $uri/ /merchant/index.html;
    }
  
   #h5移动端页面
    location /h5 {
		# root 和 alias 区别,自行百度
  		alias /www/wwwroot/h5;
	    index  index.html;
      try_files $uri $uri/ /h5/index.html;
    }  
    # HTTP反向代理相关配置开始 >>>
    location ~ /purge(/.*) {
        proxy_cache_purge cache_one $Host$request_uri$is_args$args;
    }   
    #平台api
    location /api/ {
		# 这里是服务地址或者网关地址。
        proxy_pass http://127.0.0.1:8020/;
        proxy_set_header Host $Host:$server_port;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header REMOTE-HOST $remote_addr;        proxy_set_header X-Host $host:$server_port;
        proxy_set_header X-Scheme $scheme;
        proxy_connect_timeout 30s;
        proxy_read_timeout 86400s;
        proxy_send_timeout 30s;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
      }
    # HTTP反向代理相关配置结束 <<<

      
  }  

uni-app打包

发布配置文件: 
javascript 复制代码
	"h5" : {
        "title" : "H5",
        "router" : {
            "mode" : "history",
            "base" : "/h5/"
        },
        "devServer" : {
            "https" : false
        },
        "domain" : "http://www.xxx.com/api"
    }
相关推荐
Front思29 分钟前
vue使用高德地图
javascript·vue.js·ecmascript
大G哥2 小时前
记一次K8S 环境应用nginx stable-alpine 解析内部域名失败排查思路
运维·nginx·云原生·容器·kubernetes
妍妍的宝贝2 小时前
k8s 中微服务之 MetailLB 搭配 ingress-nginx 实现七层负载
nginx·微服务·kubernetes
花花鱼3 小时前
@antv/x6 导出图片下载,或者导出图片为base64由后端去处理。
vue.js
流烟默3 小时前
Vue中watch监听属性的一些应用总结
前端·javascript·vue.js·watch
蒲公英10015 小时前
vue3学习:axios输入城市名称查询该城市天气
前端·vue.js·学习
以对_5 小时前
uview表单校验不生效问题
前端·uni-app
叶北辰CHINA5 小时前
nginx反向代理,负载均衡,HTTP配置简述(说人话)
linux·运维·nginx·http·云原生·https·负载均衡
Lansonli7 小时前
云原生(四十八) | Nginx软件安装部署
nginx·云原生·ecs服务器
杨荧7 小时前
【JAVA开源】基于Vue和SpringBoot的旅游管理系统
java·vue.js·spring boot·spring cloud·开源·旅游