lamianchain.com/d-bbc: b2b2c的文档 @ 2bc922cf4aada8ee312a7698e1d71daf49b3faf9

mall4s：s代表station，自提点端，自提点端，目前只兼容h5

1. 安装nodejs

NodeJS 项目要求最低 18.12.0，推荐 20.9.0

如果不了解怎么安装nodejs的，可以参考菜鸟教程的nodejs相关

2. 安装依赖

项目要求使用 pnpm 包管理工具

使用编辑器打开项目，在根目录执行以下命令安装依赖

pnpm install

如果不想使用 pnpm，请删除 package.json 文件中 pnpm 相关内容后再进行安装

{
    "scripts" : {
        "preinstall": "npx only-allow pnpm"  // 删除此行
    },
    "engines": {
        "pnpm": ">=7"  // 删除此行
     },
    "pnpm": { // 删除此项
        ...
    }
}

3.修改配置文件，连接后台

在本文件所在的目录下有个yami-shop/nginx/conf.d 文件夹，里面有nginx的一些配置信息

修改 .env.production 连接后台。

VITE_APP_MP_APPID ：微信公众号id
VITE_APP_BASE_API ： mall4s 这个项目连接的是api.jar提供的接口
VITE_APP_H5_DOMAIN：域名地址配置-用于微信公众号页面调用微信接口能力
VITE_APP_RESOURCES_URL : 当然他们还要访问七牛云 or 阿里云的图片，也是需要对应的域名地址

VITE_APP_MAP_KEY：天地图Key

# 如需添加更多环境变量，请以 VITE_APP_ 开头声明
# 在代码中使用 import.meta.env.VITE_APP_XXX 获取指定变量

# 环境配置标识
VITE_APP_ENV = 'production'

# 微信公众号appid
VITE_APP_MP_APPID = 'wx42bbe857570c5b40'

# 统一接口域名
VITE_APP_BASE_API = 'https://b2b2c-api.mall4j.com'

# 移动端域名地址配置
# 需要配置到 微信公众号后台 JS安全域名中，用于微信公众号页面调用微信接口能力
VITE_APP_H5_DOMAIN = 'https://h5.mall4j.com'

# 图片域名
VITE_APP_RESOURCES_URL = 'https://img.mall4j.com/'

如需部署在二级目录下，需要修改以下配置

假设部署在 station 目录，即访问的地址为 https://xxxx.xxx/station

项目配置 manifest.json 修改h5节点配置

{
	"h5": {
		"router": {
			"base": "/station/"
		}
	}
}

nginx 配置

location /station {
   try_files $uri $uri/ /station/;
}

4. 对不同项目的配置

uniapp项目是兼容多端的，所以不同的端要有不同的配置

4.1微信公众号

h5会分为两种，一种是在微信上打开的h5页面，一种是在浏览器打开的h5页面。在微信打开的h5页面，是需要公众号服务的，其中的微信支付，是jsapi支付。在手机浏览器打开的，是h5支付，属于不同的范畴。

在进行公众号打开页面的时候，因为需要进行微信公众号支付，还有微信公众号的登陆授权，所以需要配置微信公众号的appid

修改.env.production

# 这里的appid是公众号的appid，不是小程序的appid也不是微信支付的appid
VITE_APP_MP_APPID = 'wx42bbe857570c5b40'

5. 发行

5.1 微信公众号or h5 发行

编译打包可使用hbuilder开发工具或命令行编译
- hbuilder开发工具菜单选择：发行-> 网站-H5手机版，完成后会有控制台会提示： 导出h5成功，路径为：xxx
- 使用命令行： npm run build:h5，编译输出目录 dist/build/h5

将步骤1中生成的文件夹中的文件，压缩，上传到服务器nginx指定好的目录(/nginx/conf.d/b2c-h5.conf )，解压

location / {
    # vue的 history 模式需要
    try_files $uri $uri/ /;
    # h5的路径存放到这里 /usr/share/nginx/html/station
    # 1.如果是docker部署的nginx，那么这个路径是docker里面的路径，
    # 服务器上的物理路径应该是 在docker-compose下的mall4j-nginx映射下 “./nginx/html:/usr/share/nginx/html” 也就是docker-compose的相对路径下的nginx/html文件夹
    # 2. 如果是非docker部署，就是服务器的物理路径
    root /usr/share/nginx/html/station;
    index index.html;
}

5.mall4s项目的搭建.md 4.1 KB История Исходник