mall4pc-bbc:pc代表pc端
NodeJS 项目要求最低 18.12.0,推荐 20.9.0
推荐使用 WebStorm 或 VS Code 进行开发、编译
项目要求使用 pnpm 包管理工具
使用编辑器打开项目,在根目录执行以下命令安装依赖
pnpm install
如果不想使用 pnpm,请删除 package.json 文件中 pnpm 相关内容后再进行安装
{
"scripts" : {
"preinstall": "npx only-allow pnpm" // 删除此行
},
"engines": {
"pnpm": ">=7" // 删除此行
},
"pnpm": { // 删除此项
...
}
}
在本文件所在的目录下有个
mall4j-shop/nginx/conf.d文件夹,里面有nginx的一些配置信息
修改 .env.production 连接后台,
VITE_APP_BASE_API : mall4pc-bbc 这个项目连接的是api.jar提供的接口VITE_APP_WS_IM_API : 当然他们还需要与用户进行客服消息通讯,所以也要连接websocket,访问wukongim中间件提供的ws端口VITE_APP_RESOURCES_URL : 当然他们还要访问七牛云 or 阿里云的图片,也是需要对应的域名地址VITE_APP_H5_DOMAIN:pc端有h5的二维码,提供用户手机浏览网页VITE_APP_MERCHANT_PLATFORM_URL : 商家管理后台地址
# 如需添加更多环境变量,请以 VITE_APP_ 开头声明
# 在代码中使用 import.meta.env.VITE_APP_XXX 获取指定变量
# 环境配置标识
VITE_APP_ENV = 'production'
# 统一接口域名
VITE_APP_BASE_API = 'https://b2b2c-api.mall4j.com'
# 客服websocket接口请求地址,https对应wss,http对应ws
VITE_APP_WS_IM_API = 'wss://b2b2c-im.mall4j.com'
# 移动端域名地址配置 - 用于生成二维码跳转链接
VITE_APP_H5_DOMAIN = 'https://h5.mall4j.com'
# 商家端后台地址
VITE_APP_MERCHANT_PLATFORM_URL = 'https://b2b2c-multishop.mall4j.com'
# 图片域名
VITE_APP_RESOURCES_URL = 'https://img.mall4j.com/'
h5路径作用如下:
假设部署在 pc 目录,即访问的地址为 https://xxxx.xxx/pc
路由配置 router/index.js
const router = createRouter({
// createWebHistory 传入字符串参数目录配置:/目录名/
history: createWebHistory('/pc/'),
})
项目配置 vite.config.js
export default defineConfig({
// 添加此项配置
base: '/pc/',
})
nginx 配置
location /pc {
try_files $uri $uri/ /pc/;
}
npm run build 命令对项目进行打包将生成的dist目录,压缩
上传到服务器nginx指定好的目录,解压
nginx配置可以参考 本文件所在的目录下有个mall4j-shop/nginx/conf.d 文件夹,有1个配置文件,内有详细的配置文件 ,可以参考:
b2b2c-pc.conf
location / {
try_files $uri $uri/ /;
}