> mall4vs-bbc：v代表vue项目、s代表商家端，是后台管理员界面使用的前端项目，因为前后端分离的

> mall4vp-bbc：v代表vue项目、p代表平家端，是后台管理员界面使用的前端项目，因为前后端分离的

> 在本地打包完成后上传到服务器！！！！

## 安装nodejs

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

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



## 安装依赖

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

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

```bash
pnpm install
```

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

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



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

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

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

- `VITE_APP_BASE_API` ： `mall4vs-bbc` 这个项目连接的是`multishop.jar`提供的接口，`mall4vp-bbc` 这个项目连接的是`platform.jar`提供的接口
- `VITE_APP_WS_IM_API` :  当然他们还需要与用户进行客服消息通讯，所以也要连接`websocket`,访问`wukongim`中间件提供的ws端口
- `VITE_APP_RESOURCES_URL` :  当然他们还要访问七牛云 or 阿里云的图片，也是需要对应的域名地址
- `VITE_APP_MAP_KEY` ：天地图Key，用于地图相关功能



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

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

# api接口请求地址
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'

# 静态资源文件url
VITE_APP_RESOURCES_URL = 'https://img.mall4j.com/'

# 天地图Key
VITE_APP_MAP_KEY = ''
```



如果你仔细查看我们默认的`.env.production`的设置的话，会看到我们的url后面加了`/apis` ，实际上这是我们为了少创建几个子域名做的操作，如果你看到压缩包里面的`/nginx/conf.d/b2b2c-multishop.conf` 和 `/nginx/conf.d/b2b2c-platform.conf` 就能看出这里其实做了转发。其实如果创建的子域名足够多，也就不需要nginx进行转发了，此时直接填域名即可（就像客服一样），无需再加`/apis` 两个后缀了。

如下所示：

```nginx
    location /apis {
    	# 这里将/apis的请求都转发到了后台jar
        rewrite ^/apis/(.*)$ /$1 break;
        proxy_pass http://xxx:xxx;
    }
```



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

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

1. 路由配置  router/index.js 

   ```javascript
   const router = createRouter({
     // createWebHistory 传入字符串参数目录配置：/目录名/
     history: createWebHistory('/admin/'),
   })
   ```

 2. 项目配置  vite.config.js

    ```javascript
    export default defineConfig(({ command }) => {
      return {
        // 添加此项配置
    	base: '/admin/',
      }
    })
    ```

 3. nginx 配置

    ```nginx
    location /admin {
        try_files $uri $uri/ /admin/;
    }
    ```

    

### 打包，上传到服务器

1. 使用 `npm run build` 命令对项目进行打包
2. 将生成的`dist` 文件夹中的文件，压缩，上传到服务器nginx指定好的目录(`/nginx/conf.d/b2b2c-multishop.conf` )，解压



`b2b2c-multishop.conf`

```nginx
    location / {
        # 商家端vue项目的路径存放到这里 /usr/share/nginx/html/multishop
        # 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/multishop;
    }
```



`b2b2c-platform.conf`

```nginx
location / {
    # 平台端vue项目的路径存放到这里 /usr/share/nginx/html/platform
    # 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/platform;
}
```





### 初始账号密码

1.平台端账号：**admin**   密码：123456

2.商家端账号：**13000000000**   密码：123456




### 登录平台端进行配置

登录平台端，依次点击`系统配置 -> 后台配置`

1. 修改`api接口域名`正式环境域名（api项目的域名），否则无法收到微信支付回调，从而订单变为支付成功的状态

2. 修改`商家端接口域名(非vue路径，java接口路径)` 正式环境商家端后台接口的请求地址（如果按照了我们的nginx配置进行跨域配置，那么需要修改多一个`/apis`否则会请求到前端），否则无法收到微信退款回调，从而订单变为退款成功的状态

3. 修改`平台端接口域名(非vue路径，java接口路径)` 为正式环境平台端后台接口的请求地址

4. 文件资源服务器域名 这里的域名和 ` VITE_APP_RESOURCES_URL = 'https://img.mall4j.com/'` 这里写的是一样的