vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > uniApp h5项目命令行打包生成

uniApp h5项目如何通过命令行打包并生成指定路径及文件名称

作者:Best_Liu~

用uni-app来写安卓端,近日需要将程序打包为H5放到web服务器上,经过一番折腾,这里给大家分享下,这篇文章主要给大家介绍了关于uniApp h5项目如何通过命令行打包并生成指定路径及文件名称的相关资料,需要的朋友可以参考下

话不多说,直接上干货

第一步:采用hbuilder新建一个项目

第二部:通过cli新建一个项目

创建命令:

vue create -p dcloudio/uni-preset-vue uniapp

创建成功之后先运行一下项目,如果启动失败

Error: Cannot find module ‘webpack/lib/RuleSet‘

1、降低cli版本

npm uninstall -g @vue/cli
npm install -g @vue/cli@4.5.15

2、降低node版本

我们将hb的项目作为基础

回到主题,将hb项目作为基础,

第一步:新建src文件夹,将以下文件放入src文件夹中

 第二步:删除hb项目中除了src之外的所有文件

第三步:将cli项目中的以下文件copy过来

第四步:将hb项目中 package.json文件中dependencies里面的依赖引入到copy过来的 package.json文件中;在devDependencies中加入  "node-sass": "^4.14.1",

导入之后文件目录结构如下:

第五步:npm install

第六步:npm run dev运行项目

第七步:npm run build 打包项目

在build这里,可以把build区分为了test和prod,

通过UNI_OUTPUT_DIR,来设置打包后生成的文件名和路径

UNI_OUTPUT_DIR=dist/build/h5_prod

 第八步:打包成功后文件位置

总结

到此这篇关于uniApp h5项目如何通过命令行打包并生成指定路径及文件名称的文章就介绍到这了,更多相关uniApp h5项目命令行打包生成内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文