域名子目录发布问题(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"
    }
相关推荐
计算机毕设VX:Fegn089516 分钟前
计算机毕业设计|基于springboot + vue旅游信息推荐系统(源码+数据库+文档)
java·数据库·vue.js·spring boot·课程设计·旅游
CHB16 分钟前
uni-app,你的最佳vibe coding搭子
uni-app·vibecoding
古月฿1 小时前
大学生素质测评系统设计与实现
java·vue.js·redis·mysql·spring·毕业设计
码农秋1 小时前
Element Plus DatePicker 日期少一天问题:时区解析陷阱与解决方案
前端·vue.js·elementui·dayjs
源码获取_wx:Fegn08951 小时前
基于springboot + vue物业管理系统
java·开发语言·vue.js·spring boot·后端·spring·课程设计
MonkeyKing_sunyuhua1 小时前
ubuntu22.04安装nginx
运维·windows·nginx
默海笑2 小时前
VUE后台管理系统:项目架构之搭建Layout架构解决方案与实现
前端·javascript·vue.js
麦麦大数据2 小时前
F051-vue+flask企业债务舆情风险预测分析系统
前端·vue.js·人工智能·flask·知识图谱·企业信息·债务分析
苹果电脑的鑫鑫3 小时前
vue和react缩进规则的配置项如何配置
前端·vue.js·react.js
BD_Marathon3 小时前
Vue3_工程文件之间的关系
前端·javascript·vue.js