2025-03-19 15:04:57 +08:00
|
|
|
|
> station，自提点端，目前只兼容h5
|
|
|
|
|
|
|
|
|
|
|
|
## 1. 安装nodejs
|
|
|
|
|
|
|
|
|
|
|
|
[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/) 包管理工具
|
|
|
|
|
|
|
|
|
|
|
|
使用编辑器打开项目，在根目录执行以下命令安装依赖
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
pnpm install
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
如果不想使用 pnpm，请删除 `package.json` 文件中 `pnpm` 相关内容后再进行安装
|
|
|
|
|
|
|
|
|
|
|
|
```json
|
|
|
|
|
|
{
|
|
|
|
|
|
"scripts" : {
|
|
|
|
|
|
"preinstall": "npx only-allow pnpm" // 删除此行
|
|
|
|
|
|
},
|
|
|
|
|
|
"engines": {
|
|
|
|
|
|
"pnpm": ">=7" // 删除此行
|
|
|
|
|
|
},
|
|
|
|
|
|
"pnpm": { // 删除此项
|
|
|
|
|
|
...
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## 3.修改配置文件，连接后台
|
|
|
|
|
|
|
|
|
|
|
|
> 在本文件所在的目录下有个`yami-shop/nginx/conf.d` 文件夹，里面有nginx的一些配置信息
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
修改 `.env.development` 连接后台。
|
|
|
|
|
|
|
2025-03-20 17:43:07 +08:00
|
|
|
|
- `VITE_APP_BASE_API` ： `tmerclub-uniapp` 这个项目连接的是`api.jar`提供的接口
|
2025-03-19 15:04:57 +08:00
|
|
|
|
- `VITE_APP_RESOURCES_URL` : 当然他们还要访问七牛云 or 阿里云的图片，也是需要对应的域名地址
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
```bash
|
|
|
|
|
|
VITE_APP_BASE_API = "http://192.168.1.195:8000"; //统一接口域名，正式环境
|
|
|
|
|
|
VITE_APP_RESOURCES_URL = "https://img.mall4j.com/"; //图片域名
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## 4. 对不同项目的配置
|
|
|
|
|
|
|
|
|
|
|
|
uniapp项目是兼容多端的，所以不同的端要有不同的配置
|
|
|
|
|
|
|
|
|
|
|
|
#### 4.1微信公众号
|
|
|
|
|
|
|
|
|
|
|
|
> h5会分为两种，一种是在微信上打开的h5页面，一种是在浏览器打开的h5页面。在微信打开的h5页面，是需要公众号服务的，其中的微信支付，是jsapi支付。在手机浏览器打开的，是h5支付，属于不同的范畴。
|
|
|
|
|
|
|
|
|
|
|
|
在进行公众号打开页面的时候，因为需要进行微信公众号支付，还有微信公众号的登陆授权，所以需要配置微信公众号的appid
|
|
|
|
|
|
|
|
|
|
|
|
修改`.env.development`
|
|
|
|
|
|
|
|
|
|
|
|
```bash
|
|
|
|
|
|
# 微信公众号appid
|
|
|
|
|
|
VITE_APP_MP_APPID = 'wx42bbe857570c5b40'
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## 5. 发行
|
|
|
|
|
|
|
|
|
|
|
|
#### 5.1 微信公众号or h5 发行
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1. hbuilder开发工具上面的菜单选择：`发行-> 网站-H5手机版`，hbuilder打包完毕之后会有`导出h5成功，路径为：xxx`
|
|
|
|
|
|
2. 将步骤1中生成的文件夹中的文件，压缩，上传到服务器nginx指定好的目录(`/nginx/conf.d/cloud-h5.conf` )，解压
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
```nginx
|
|
|
|
|
|
location / {
|
|
|
|
|
|
# vue的 history 模式需要
|
|
|
|
|
|
try_files $uri $uri/ /;
|
|
|
|
|
|
# h5的路径存放到这里 /usr/share/nginx/html/cloud-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/cloud-station;
|
|
|
|
|
|
index index.html;
|
|
|
|
|
|
|
|
|
|
|
|
#### kill cache
|
|
|
|
|
|
# 这里要清除缓存，不然微信会缓存首页，如果首页更改了代码，用户不清除微信缓存是获取不到新代码的
|
|
|
|
|
|
add_header Last-Modified $date_gmt;
|
|
|
|
|
|
add_header Cache-Control 'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0';
|
|
|
|
|
|
if_modified_since off;
|
|
|
|
|
|
expires off;
|
|
|
|
|
|
etag off;
|
|
|
|
|
|
}
|
|
|
|
|
|
```
|
|
|
|
|
|
|
