德尚网络

Appearance

Vue3 管理后台安装 ​

概述 ​

DSMall Pro管理后台基于Vue 3 + Element Plus + Vite开发，本文档介绍如何安装和配置管理后台。

环境要求 ​

基础环境 ​

推荐版本 ​

安装步骤 ​

1. 获取代码 ​

bash
# 进入管理后台目录
cd vue-element-admin

2. 安装依赖 ​

bash
# 使用npm安装
npm install

# 或使用yarn安装
yarn install

# 如果安装速度慢，可以使用国内镜像
npm config set registry https://registry.npmmirror.com
npm install

3. 配置环境变量 ​

创建 .env.production 文件：

env
# 系统类型配置
VITE_SYSTEM_TYPE=admin

# API基础地址
VITE_APP_BASE_URL=https://your-domain.com/api

# 文件上传地址
VITE_FILE_BASE_URL=https://your-domain.com

# 应用配置
VITE_APP_TITLE=DSMall Pro管理后台

4. 开发环境启动 ​

bash
# 启动开发服务器
npm run dev

# 或使用yarn
yarn dev

访问地址：http://localhost:5173

5. 生产环境构建 ​

bash
# 构建生产版本
npm run build

# 或使用yarn
yarn build

构建完成后，文件会生成在 dist/ 目录。

6. 部署到Web服务器 ​

bash
# 复制构建文件到Web服务器
cp -r dist/* /var/www/html/admin/

7. Nginx配置 ​

nginx
server {
    listen 80;
    server_name admin.your-domain.com;
    root /var/www/html/admin;
    index index.html;

    # 处理Vue Router的history模式
    location / {
        try_files $uri $uri/ /index.html;
    }
}

多端部署说明 ​

DSMall Pro支持多端部署，采用子域名方式部署不同的系统端：

系统类型配置 ​

在 .env.production 文件中设置 VITE_SYSTEM_TYPE 参数：

env
# 管理后台
VITE_SYSTEM_TYPE=admin

# 商户端
VITE_SYSTEM_TYPE=merchant

# 店铺端
VITE_SYSTEM_TYPE=store

子域名部署 ​

DSMall Pro采用子域名方式部署三个不同的系统端：

系统端子域名部署目录系统类型
管理后台admin.your-domain.com/var/www/html/admin/admin
商户端merchant.your-domain.com/var/www/html/merchant/merchant
店铺端store.your-domain.com/var/www/html/store/store

部署步骤 ​

  1. 修改系统类型：在 .env.production 中设置对应的 VITE_SYSTEM_TYPE
  2. 重新构建：执行 npm run build 重新编译
  3. 部署文件：将 dist/ 目录下的文件部署到对应的Web目录
  4. 配置子域名：在DNS中解析对应的子域名到服务器IP

Nginx子域名配置示例 ​

nginx
# 管理后台
server {
    listen 80;
    server_name admin.your-domain.com;
    root /var/www/html/admin;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

# 商户端
server {
    listen 80;
    server_name merchant.your-domain.com;
    root /var/www/html/merchant;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

# 店铺端
server {
    listen 80;
    server_name store.your-domain.com;
    root /var/www/html/store;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

验证安装 ​

1. 开发环境测试 ​

bash
# 启动开发服务器
npm run dev

# 检查控制台输出
# 应该看到类似以下信息：
# Local:   http://localhost:5173/
# Network: http://192.168.1.100:5173/

2. 构建测试 ​

bash
# 构建项目
npm run build

3. 功能测试 ​

  • 访问管理后台登录页面
  • 测试用户登录功能
  • 测试菜单导航功能
  • 测试API接口调用

常见问题 ​

安装后问题 ​

Q: 页面刷新404怎么办？ A: 确认Nginx配置中添加了：location / { try_files $uri $uri/ /index.html; }

最后更新：2024-01-20
维护者：DSPlatform技术团队