mall4d-bbc/linux环境(生产环境搭建)/2.mall4vs-bbc和mall4vp-bbc项目的搭建.md

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

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

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

安装nodejs + 淘宝npm镜像

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

如果不了解怎么安装nodejs的，可以参考 菜鸟教程的nodejs相关

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

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

安装依赖启动项目

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

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

npm i

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

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 阿里云的图片，也是需要对应的域名地址

  // 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 两个后缀了。

如下所示：

    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

    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

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/' 这里写的是一样的