域名子目录发布问题(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"
    }
相关推荐
WeiXin_DZbishe11 分钟前
基于springboot城市公交实时运营与调度系统-计算机毕设 附源码【课程设计】66173
java·vue.js·spring boot·后端·python·php·课程设计
WeiXin_DZbishe32 分钟前
基于Springboot+AI的kuall音乐广场的设计与实现-计算机毕设 附源码【课程设计】12715
vue.js·人工智能·spring boot·后端·python·php·课程设计
_馒头1 小时前
pixiJs游戏开发实践 - 跳棋小游戏
javascript·vue.js
AIGC小尼2 小时前
毕设实战|SpringBoot+Vue 实现多个系统项目
vue.js·spring boot·课程设计
光依旧4 小时前
发版就掉请求?Spring Boot优雅停机的四步
运维·spring boot·nginx·高可用·优雅停机·mcp server
踩着两条虫5 小时前
我在浏览器里“盖”了一个村:Vue + Three.js 大屏开发踩坑记
前端·vue.js·three.js
普马萨特7 小时前
uni-app x 定位踩坑实录:H5/小程序/App 统一经纬度与逆地理编码
uni-app
高级程序源7 小时前
SSM仓储管理系统31582-计算机课程设计、毕业设计
vue.js·python·mysql·小程序·flask·课程设计
溪语流沙7 小时前
【Web全栈进阶】前端世界观:现代工具链与框架为什么存在
前端·javascript·vue.js
WeiXin_DZbishe8 小时前
基于微信小程序的本地闲置物品交易平台-计算机毕设 附源码【课程设计】26825
vue.js·spring boot·python·微信小程序·架构·php·课程设计