域名子目录发布问题(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"
    }
相关推荐
Crystal3281 小时前
App端用户每日弹出签到弹窗如何实现?(uniapp+Vue)
前端·vue.js
molly cheung1 小时前
Vue3:watch与watchEffect的异同
vue.js·watch·store·watcheffect
掘金安东尼3 小时前
前端周刊第439期(2025年11月3日–11月9日)
前端·javascript·vue.js
有蝉3 小时前
vue-office——支持多种文件(docx、excel、pdf)预览的vue组件库,支持vue2/3。也支持非Vue框架的预览。
vue.js·pdf·excel
起这个名字3 小时前
微前端应用通信使用和原理
前端·javascript·vue.js
QuantumLeap丶3 小时前
《uni-app跨平台开发完全指南》- 06 - 页面路由与导航
前端·vue.js·uni-app
Sheldon一蓑烟雨任平生3 小时前
Vue3 组件库 Element Plus
vue.js·vue3·element plus·element ui·vue3 常用组件库
用户9714171814273 小时前
uniapp页面路由
vue.js·uni-app
Kingsaj3 小时前
uni-app打包app -- 在用户首次启动 App 时,强制弹出一个“用户协议与隐私政策”的确认对话框。
服务器·ubuntu·uni-app
Vue10244 小时前
uniapp 使用renderjs 封装 video-player 视频播放器, html5视频播放器-解决视频层级、覆盖、播放卡顿
uni-app·音视频·html5