JNPF低代码开发平台移动端项目命令行打包H5改造丨【WEB前端大作战】

薛定喵君 发表于 2021/04/15 17:54:10 2021/04/15
【摘要】 JNPF开发平台的移动端是基于uni-app进行开发的,所以可以实现多端应用的快速开发。但是部署流程就略显繁琐了,JNPF的移动端并不支持命令行调用打包。 这样子的话每次部署h5项目都需要拉取代码然后用工具打包再上传到服务器,太麻烦了,不能容忍。所以为了提高一点效率就需要对JNPF移动端项目进行一定的改造了。 如果遇到项目需要支持命令行打包都可以参照这种做法,希望本文可以帮到有需要的同学们。

分享一次对 JNPF 移动端 uni-app 项目命令行打包 H5 的改造过程

问题背景

JNPF 开发平台的移动端是基于 uni-app 进行开发的,所以可以实现多端应用的快速开发。
但是部署流程就略显繁琐了,JNPF 的移动端并不支持命令行调用打包。

这样子的话每次部署h5项目都需要拉取代码然后用工具打包再上传到服务器,太麻烦了,不能容忍。所以为了提高一点效率就需要对JNPF移动端项目进行一定的改造了。

为了更好地学习,在改造之前我们先来了解一下 vue-cli 创建的项目与 HBuilderX 可视化界面创建项目的区别吧。

可视化界面、vue-cli 命令行创建项目的区别

编译器的区别

vue-cli

  • 编译器安装在项目下
  • 升级编译器需要执行 npm update 或者手动修改 package.json 中的uni相关依赖版本后执行 npm install
  • 需自己手动 npm 安装 less、scss、ts 等编译器,在 HBuilderX 的插件管理界面安装无效

HBuilderX

  • 编译器在 HBuilderX 的安装目录下的 plugin 目录,随着 HBuilderX 的升级会自动升级编译器

vue-cli 创建项目迁移 HBuilderX
已经使用 cli 创建的项目,想继续在 HBuilderX 里使用,可以把工程拖到 HBuilderX 中。

  • 如果是把整个项目拖入 HBuilderX,则编译时走的是项目下的编译器。
  • 如果是把 src 目录拖入到 HBuilderX 中,则走的是 HBuilderX 安装目录下plugin 目录下的编译器。

开发工具的区别

vue-cli

  • 内置 d.ts,可在 vscode、webstorm 等支持 d.ts 的开发工具里正常开发并有语法提示
  • 编译器已经安装到项目下,下载 HBuilderX 时只需下载 10M 的标准版

HBuilderX

  • 不带 d.ts
  • 内置了 uni-app 语法提示库
  • 发布 App 时,仍然需要使用 HBuilderX。其他开发工具无法发布 App

大概了解一下这些区别之后,下面就来讲讲具体改造的步骤。

uni-app 移动端项目改造步骤

1. 环境安装(可选),如果已经安装了可以忽略此步骤

npm install -g @vue/cli

2. 使用 vue-cli 命令行新建项目

vue create -p dcloudio/uni-preset-vue my-project

3. 接着选择项目模板(可选择默认模板)

4. 打开需要改造的 JNPF 移动端项目,复制 src 下的文件

  • 注意红框内的可以不用复制

5. 复制到用 vue-cli 新创建项目的 src 文件夹下

6. 修改cli创建项目的入口页及 manifest.json

因为JNPF移动端项目的入口页是main.html,所以需要把main.html的内容拷贝到cli创建项目public目录下的index.html去,然后如果manifest.json设置了打包配置的话那么就需要把配置中h5模板的配置改为public/index.html

"h5" : {
    "sdkConfigs" : {
        "maps" : {}
    },
    "title" : "xxx",
    "template" : "public/index.html",
    "domain" : "xxx",
    "devServer": {
        "port": 8081,
        "disableHostCheck": true,
        "proxy": {
            "/xx": {
                "target": "xx",
                "changeOrigin": true,
                "secure" : false,
                "pathRewrite": {
                    "^/xx": ""
                }
            }
        }
    }
}

7. 接着我们需要稍微改一下根目录下 package.json 的依赖

devDependencies 增加 "@dcloudio/uni-ui": "^1.2.5" ,然后就可以执行 npm install 了。

至此改造就差不多完成了,然后我们就可以尝试去命令行打包h5应用了。

命令行打包h5应用

老规矩先执行 npm install 安装依赖,安装完之后执行 npm run build:h5 命令尝试打包
不出意外的话会出现以下两种错误

从错误信息我们可以看出是缺少依赖( sass-loader 和 node-sass 的)。
所以我们分别执行以下命令就可以了

npm install --save sass-loader@7.3.1
npm install node-sass@4.14.1

也可以通过执行 yarn 来安装依赖。
安装好依赖之后我们再次执行npm run build:h5尝试打包,可以发现成功了

然后就可以基于命令行愉快地打包了。

总结

本次改造是基于 JNPF 的移动端项目但是方法对于其它的 uni-app 项目还是有一定参考价值的,如果遇到项目需要支持命令行打包都可以参照这种做法,希望本文可以帮到有需要的同学们。

【WEB前端大作战】火热进行中:https://bbs.huaweicloud.com/blogs/255890

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区),文章链接,文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:cloudbbs@huaweicloud.com进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。