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

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

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

## 安装nodejs + 淘宝npm镜像

> nodejs版本请选择为 12-16 偶数版本

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


将npm的镜像源更改为淘宝的镜像源，回车（千万不要用cnpm，否则会出现不可预知的后果）：

```bash
npm config set registry https://registry.npmmirror.com
```



## 安装依赖启动项目

使用`vscode`打开vue项目，进入到该项目的根目录（根目录有`package.json` 的文件）

使用npm安装依赖（请记得配好淘宝的镜像源，除非你能确定你的网络能够畅快访问外网，另外千万不要用cnpm），使用命令行输入，回车：

```bash
npm i
```

如果用淘宝镜像装不上的话，报错信息含有“要安装python”的相关信息，就删掉node_modules 切换回原镜像试试

```bash
npm config set registry https://registry.npmjs.org/
```



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



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



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

- `VUE_APP_BASE_API` ： `mall4vs-bbc` 这个项目连接的是`multishop.jar`提供的接口，`mall4vp-bbc` 这个项目连接的是`platform.jar`提供的接口

- `VUE_APP_IM_API、VUE_APP_WS_IM_API` :  当然他们还需要与用户进行客服消息通讯，所以也要连接`im.jar`提供的接口和`websocket`
- `VUE_APP_RESOURCES_URL` :  当然他们还要访问七牛云 or 阿里云的图片，也是需要对应的域名地址



```javascript
// api接口请求地址
VUE_APP_BASE_API = 'https://b2b2c-platform.mall4j.com/apis'
// 客服api接口请求地址
VUE_APP_IM_API = 'https://b2b2c-im.mall4j.com'
// 客服webstock接口请求地址
VUE_APP_WS_IM_API = 'wss://b2b2c-im.mall4j.com'

# 静态资源文件url 这里有个/，一定不能忘了
VUE_APP_RESOURCES_URL = 'https://img.mall4j.com/'
```



如果你仔细查看我们默认的`.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;
    }
```



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

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



`b2b2c-multishop.conf`

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



`b2b2c-platform.conf`

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





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

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

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

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

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

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