d-bbc/linux环境(生产环境搭建)/3.mall4pc-bbc项目搭建.md

mall4pc-bbc：pc代表pc端

1. 安装nodejs

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

推荐使用 WebStorm 或 VS Code 进行开发、编译

2. 安装依赖

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

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

pnpm install

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

{
    "scripts" : {
        "preinstall": "npx only-allow pnpm"  // 删除此行
    },
    "engines": {
        "pnpm": ">=7"  // 删除此行
     },
    "pnpm": { // 删除此项
        ...
    }
}

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

在本文件所在的目录下有个yami-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

1. 路由配置 router/index.js

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

   1. 项目配置 vite.config.js

      export default defineConfig({
      // 添加此项配置
      base: '/pc/',
      })
      

   2. nginx 配置

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

4.打包，上传到服务器

1. 使用 npm run build 命令对项目进行打包

2. 将生成的dist 目录，压缩

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

5. nginx配置

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

b2b2c-pc.conf

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