> mall4ms-bbc：uniapp项目，可发行为H5、android/ios app



## 1. 安装nodejs + 淘宝npm镜像

[NodeJS](https://nodejs.org/) 项目要求最低 18.12.0，推荐 20.9.0

如果不了解怎么安装nodejs的，可以参考   [菜鸟教程的nodejs相关](https://www.runoob.com/nodejs/nodejs-install-setup.html)



## 2. 安装依赖

项目要求使用 [pnpm](https://www.pnpm.cn/)  包管理工具

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

```bash
pnpm install
```

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

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



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

修改 `.env.production`  连接后台。

* `VITE_APP_MP_APPID` ：微信公众号appid

- `VITE_APP_BASE_API` ： `mall4ms-bbc` 这个项目连接的是`multishop.jar`提供的接口
- `VITE_APP_WS_IM_API` ：`websocket`,访问`wukongim`中间件提供的ws端口
- `VITE_APP_H5_DOMAIN`：域名地址配置-用于分享时跳转链接
- `VITE_APP_MERCHANT_PLATFORM_URL`：商家端后台地址(pc) ，部分功能受限时展示地址指示用户到PC端操作
- `VITE_APP_RESOURCES_URL` :  对应七牛云 or 阿里云的图片域名地址
- `VITE_APP_MAP_KEY`：天地图Key，用于地图相关功能
- `VITE_APP_URL_SCHEMES`：App标识，用于跳转应用

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

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

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

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

# 客服webstock接口请求地址，https对应wss，http对应ws
VITE_APP_WS_IM_API = 'wss://b2b2c-im.mall4j.com'

# 移动端域名地址配置
VITE_APP_H5_DOMAIN = 'https://h5.mall4j.com/'

# 商家端后台地址(pc)
VITE_APP_MERCHANT_PKATFORM_URL = 'https://b2b2c-multishop.mall4j.com/'

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

# 天地图Key （应用类型：浏览器端）用于地图相关功能
VITE_APP_MAP_KEY = ''

# h5或其它app打开当前App的自定义UrlSchemes，还需要在manifest.json -> app-plus -> android/schemes 与 ios urltypes  中进行配置 (二者需要一致) (不可与用户移动端的urlSchemes相同)
VITE_APP_URL_SCHEMES = 'lanhaibbcms'
```



`manifest.json` 配置文件

```json
{
    "h5": {
      "sdkConfigs" : {
            "maps" : {
                "qqmap" : {
                    // 用于h5端ip定位
                    "key" : ""
                }
            }
        }  
    }
}
```



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

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

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

   ```json
   {
   	"h5": {
   		"router": {
   			"base": "/h5/"
   		}
   	}
   }
   ```

2. nginx 配置

   ```
   location /h5 {
       try_files $uri $uri/ /h5/;
   }
   ```



## 4. 发行

#### 4.1 发行到H5

1. hbuilder开发工具上面的菜单选择：`发行-> 网站-H5手机版`，或使用命令行  `npm run build:h5`  编译

   编译完成后可在控制台找到输出路径

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

```nginx
server {
    listen 80;
    server_name b2b2c-multishop-h5.mall4j.com;

    location / {
        try_files $uri $uri/ /;
        root /usr/share/nginx/html/multishop-h5;
        index index.html;
    }

    error_page 404 /404.html;
        location = /404-light.html {
    }

    error_page 500 502 503 504 /50x.html;
        location = /50x.html {
    }
}

```



#### 4.2 发行为APP

参考安卓、ios打包的流程