标签：npm JNPF vue cli 项目 H5 编译器 命令行 HBuilderX
分享一次对 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-project3. 接着选择项目模板(可选择默认模板)
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 安装依赖(也可以通过执行 yarn 来安装依赖)，安装完之后执行 npm run build:h5 命令尝试打包。
不出意外的话会出现以下两种错误
从错误信息我们可以看出是缺少依赖( sass-loader 和 node-sass 的)。
所以我们分别执行以下命令就可以了
-
npm install --save sass-loader@7.3.1 -
npm install node-sass@4.14.1
安装好依赖之后我们再次执行 npm run build:h5尝试打包，可以发现成功了
然后就可以基于命令行愉快地打包了。
总结
本次改造是基于 JNPF 的移动端项目但是方法对于其它的 uni-app 项目还是有一定参考价值的，如果遇到项目需要支持命令行打包都可以参照这种做法，希望本文可以帮到有需要的同学们。
标签：npm,JNPF,vue,cli,项目,H5,编译器,命令行,HBuilderX 来源： https://blog.51cto.com/xuedingmaojun/2984512
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。