跳转至

后台页面开发

后台页面热部署开发

特别注意,如果你需要对后台某个模块进行二次开发,才需要参考此文档,如果不需要,直接访问后台就可以了 http://127.0.0.1:8080/dr-admin

1.修改 config.local.js 文件,假设我们要开发 管理员模块 (adminUser)

文件路径 root -> config -> config.local.js

将 dev_modules 中的 adminUser 注释打开:

dev_modules: [
            // 'navbar',
            // 'dashboard',
            // 'adminGroup',
            'adminUser',
            // 'adminResource',
            // 'systemConfig',
            // 'backUpData',
            // 'systemOptionLog',
            // 'announce',
            // 'systemNotify',
            // 'ads',
            // 'contentTemp',
            // 'templateConfig',
            // 'versionManage',
            // 'content',
            // 'contentTags',
            // 'contentCategory',
            // 'contentMessage',
            // 'regUser',
            // 'helpCenter',
            // 'renderCms',
            // 'cmsTemplate',
            // 'plugin',
            // 'uploadFile'
        ],

2.进入 adminUser 目录下,运行工程

root -> backstage -> adminUser

npm run serve

启动成功后,不需要你单独访问,重新刷新后台 http://127.0.0.1:8080/admin/adminUser 进入 你会发现,此时界面加载的 js 文件已经自动挂载了 刚才启动的服务,如下图 自动挂载

3.登录进入后台,刷新页面 至此,你在 adminUser 目录下的修改会以热部署形式更新到页面上

4.编译 adminUser 模块
修改文件 buildModules.js

root -> backstage -> build

// 指定打包模块,不填默认打包所有模块
let designatedModule = ['adminUser'];
build目录下编译 adminUser

  • windows 环境下

    set NODE_ENV=production&&npm run buildDevModules
    

  • Mac/Linux 环境下

    export NODE_ENV=production&&npm run buildDevModules
    

发布到七牛云存储

由于后台管理的模块使用了微服务模式,我们可以把所有模块编译完成后上传到七牛云存储上,在项目发布到生产后,后台引用云上的资源更加方便,操作如下:

1.修改七牛配置

root -> backstage -> build -> utils.js

找到七牛的 accessKey, secretKey 等信息,改成自己的

2.回到build目录下

root -> backstage -> build

npm run buildPrdModules

3.修改 config.default.js, 找到 origin 字段,修改为你的七牛cdn域名

文件路径 root -> config -> config.default.js

origin: 'https://cdn.yourcdn.cn',