lamianchain.com/d-bbc: b2b2c的文档 @ 2bc922cf4aada8ee312a7698e1d71daf49b3faf9

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

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

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

安装nodejs

NodeJS 项目要求最低 18.12.0，推荐 20.9.0

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

安装依赖

项目要求使用 pnpm 包管理工具

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

pnpm install

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

{
    "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，用于地图相关功能

# 如需添加更多环境变量，请以 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 两个后缀了。

如下所示：

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

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

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

路由配置 router/index.js

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

项目配置 vite.config.js

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

nginx 配置

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

打包，上传到服务器

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

b2b2c-multishop.conf

    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

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

登录平台端进行配置

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

修改api接口域名正式环境域名（api项目的域名），否则无法收到微信支付回调，从而订单变为支付成功的状态
修改商家端接口域名(非vue路径，java接口路径) 正式环境商家端后台接口的请求地址（如果按照了我们的nginx配置进行跨域配置，那么需要修改多一个/apis否则会请求到前端），否则无法收到微信退款回调，从而订单变为退款成功的状态
修改平台端接口域名(非vue路径，java接口路径) 为正式环境平台端后台接口的请求地址
文件资源服务器域名这里的域名和 VITE_APP_RESOURCES_URL = 'https://img.mall4j.com/' 这里写的是一样的

2.mall4vs-bbc和mall4vp-bbc项目的搭建.md 5.7 KB 文件歷史 原始文件