域名子目录发布问题(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"
    }
相关推荐
yy55275 小时前
Nginx 性能优化与监控
运维·nginx·性能优化
踩着两条虫5 小时前
VTJ.PRO 核心架构全公开!从设计稿到代码,揭秘AI智能体如何“听懂人话”
前端·vue.js·ai编程
蓝冰凌7 小时前
Vue 3 中 defineExpose 的行为【defineExpose暴露ref变量】详解:自动解包、响应性与实际使用
前端·javascript·vue.js
奔跑的呱呱牛7 小时前
generate-route-vue基于文件系统的 Vue Router 动态路由生成工具
前端·javascript·vue.js
sp42a8 小时前
在 NativeScript-Vue 中实现流畅的共享元素转场动画
vue.js·nativescript·app 开发
还是大剑师兰特9 小时前
Vue3 中 computed(计算属性)完整使用指南
前端·javascript·vue.js
孜孜不倦不忘初心9 小时前
Ant Design Vue 表格组件空数据统一处理 踩坑
前端·vue.js·ant design
csdn_aspnet10 小时前
查看 vite 与 vue 版本
javascript·vue.js
于先生吖10 小时前
SpringBoot+Vue 前后端分离短剧漫剧系统开发实战
vue.js·spring boot·后端