mall4vs-bbc:v代表vue项目、s代表商家端,是后台管理员界面使用的前端项目,因为前后端分离的
mall4vp-bbc:v代表vue项目、p代表平家端,是后台管理员界面使用的前端项目,因为前后端分离的
在本地打包完成后上传到服务器!!!!
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;
}
npm run build:prod 命令对项目进行打包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;
}
登录平台端,依次点击系统配置 -> 后台配置
修改api接口域名正式环境域名(api项目的域名),否则无法收到微信支付回调,从而订单变为支付成功的状态
修改商家端接口域名(非vue路径,java接口路径) 正式环境商家端后台接口的请求地址(如果按照了我们的nginx配置进行跨域配置,那么需要修改多一个/apis否则会请求到前端),否则无法收到微信退款回调,从而订单变为退款成功的状态
修改平台端接口域名(非vue路径,java接口路径) 为正式环境平台端后台接口的请求地址
文件资源服务器域名 这里的域名和 VUE_APP_RESOURCES_URL = 'https://img.mall4j.com/' 这里写的是一样的