> mall4pc-bbc：pc代表pc端

## 1. 安装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
```



## 2. 安装依赖

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

使用npm安装依赖，使用命令行输入，回车：

```bash
npm i
```





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



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


修改 `/plugins/config.js`  连接后台。

- `path` ： `mall4pc-bbc` 这个项目连接的是`api.jar`提供的接口
- `imUrl、wsImUrl` :  当然他们还需要与用户进行客服消息通讯，所以也要连接`im.jar`提供的接口和`websocket`
- `picDomain` :  当然他们还要访问七牛云 or 阿里云的图片，也是需要对应的域名地址
- `h5Path`：pc端有h5的二维码，提供用户手机浏览网页
- `merchantPlatformUrl` :  商家管理后台地址



```javascript
// 配置文件
let path, imPath, imWsPath, merchantPlatformUrl, h5Path

// 图片域名
const picDomain = "https://img.mall4j.com/";

//  ==============生产环境===============
if (process.env.NODE_ENV === 'production') {
  path = 'https://b2b2c-api.mall4j.com'
  // 客服api
  imPath = 'https://b2b2c-im.mall4j.com'
  // 客服ws
  imWsPath = 'wss://b2b2c-im.mall4j.com'
  // H5域名，用于生成二维码。移动端扫码后跳转的地址
  h5Path = 'https://h5.mall4j.com'
  // 商家管理后台地址
  merchantPlatformUrl = 'https://b2b2c-multishop.mall4j.com'
}
...
```




h5路径作用如下：

![h5qrcode](../img/生产环境/h5qrcode.png)





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

1. 使用 `npm run build` 命令对项目进行打包
2. 将步骤1中生成的两个文件+ 两个文件夹，压缩

```
.nuxt
static
nuxt.config.js
package.json
```

3. 上传到服务器nginx指定好的目录，解压



### 5.在服务端启动

#### 5.1不使用docker进行部署，使用pm2启动

> 当不使用docker部署的时候，安装nodejs + 淘宝npm镜像 + 安装依赖的操作！！！

1. 进入到服务器 `package.json` 所在目录，执行`npm install -g pm2`

安装信息如下（最后几行）

```
All packages installed (248 packages installed from npm registry, used 5s(network 5s), speed 1.21MB/s, json 212(466.54kB), tarball 5.6MB)
[pm2@4.4.0] link /opt/nodejs/bin/pm2@ -> /opt/nodejs/lib/node_modules/pm2/bin/pm2
[pm2@4.4.0] link /opt/nodejs/bin/pm2-dev@ -> /opt/nodejs/lib/node_modules/pm2/bin/pm2-dev
[pm2@4.4.0] link /opt/nodejs/bin/pm2-docker@ -> /opt/nodejs/lib/node_modules/pm2/bin/pm2-docker
[pm2@4.4.0] link /opt/nodejs/bin/pm2-runtime@ -> /opt/nodejs/lib/node_modules/pm2/bin/pm2-runtime
```

建立pm2软链接

```bash
ln -s /opt/nodejs/lib/node_modules/pm2/bin/pm2 /usr/local/bin/pm2
```

使用PM2启动项目

```bash
pm2 start npm --name "mall4j-pc" -- run start
```

以下是PM2的常用命令

```bash
pm2 list # 查看当前正在运行的进程
pm2 start all  # 启动所有应用
pm2 restart all  # 重启所有应用
pm2 stop all # 停止所有的应用程序
pm2 delete all # 关闭并删除所有应用
pm2 logs # 控制台显示所有日志

pm2 start 0  # 启动 id为 0的指定应用程序
pm2 restart 0  # 重启 id为 0的指定应用程序
pm2 stop 0 # 停止 id为 0的指定应用程序
pm2 delete 0 # 删除 id为 0的指定应用程序

pm2 logs 0 # 控制台显示编号为0的日志
pm2 show 0  # 查看执行编号为0的进程
pm2 monit mall4j-pc # 监控名称为mall4j-pc的进程
```



#### 5.2使用docker进行部署

将打包好的两个文件+ 两个文件夹，分别放到`/yami-shop/yami-shop-pc`下，等待`docker-compose` 启动



### 6. nginx配置

nginx配置可以参考 本文件所在的目录下有个`yami-shop/nginx/conf.d` 文件夹，有1个配置文件，内有详细的配置文件 ，可以参考：

`b2b2c-pc.conf`



```nginx
    location / {
        # 3333端口是pc启动的端口，因为pc是服务端渲染的，要启动起来，也要占用端口
        # 这里因为是在docker，所以这个mall4j-pc访问的是docker内部网络，非docker部署也可以用ip http://${ip}:3333;
        # 这里采用mall4j-pc是因为docker内网，如果使用docker的话，应该是127.0.0.1或者是xxx.xxx.xxx.xxx的内网（推荐）/公网ip
        proxy_pass http://mall4j-pc:3333;
        proxy_set_header Host $host:$server_port;
    }
```