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

这篇具有很好参考价值的文章主要介绍了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文件夹中

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

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

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

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

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

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

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

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

 

 第五步:npm install

第六步:npm run dev运行项目

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

 第七步:npm run build 打包项目

在build这里,可以把build区分为了test和prod,
通过UNI_OUTPUT_DIR,来设置打包后生成的文件名和路径

UNI_OUTPUT_DIR=dist/build/h5_prod

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

uniApp h5项目通过命令行打包,并生成指定路径、文件名称文章来源地址https://www.toymoban.com/news/detail-471772.html

到了这里,关于uniApp h5项目通过命令行打包,并生成指定路径、文件名称的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uniapp的h5项目 用命令起这个项目(vue-cli)

    这里其实就相当于给uniapp h5套了一个vue-cli的壳(纯属个人感觉) 首先需要安装vue-cli 脚手架 然后创建项目(这里需要在hbuilder创建) 安装成功后它的结构是目录, 打开项目查看package.json文件,所有对应的命令都已经有了 用命令运行一下 然后在把你的uniapp h5项目全部拷贝到

    2024年04月11日
    浏览(46)
  • h5项目编写成app,你还不了解吗?直接打包和套webview结合uniapp两种实现方式

    在各种需求中 大致有两类 让h5直接运行成app,有一个成熟的h5项目,想直接打包app 不想触发app更新,又能获取最新的更新效果,使用webview套h5,最终生成app 今天笔者带大家粗略实现以上的两个需求 打开hbuiderx 新建项目 选择 5+app 删除其他的多余文件 将自己打包生成的文件进

    2024年02月04日
    浏览(47)
  • 基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)

    除了使用HBuilderX工具可视化搭建项目外,DCloud官方还提供了一个脚手架用于命令行搭建项目。 uni-app项目支持 uni cli和 HBuilderX cli两种脚手架工具: uni cli:面向非HBuilderX的用户(如习惯使用vscode/webstorm的开发者),提供创建项目、编译发行等能力;在App平台,仅支持生成离线

    2024年04月16日
    浏览(76)
  • 【b站咸虾米】chapter1&2_uniapp介绍与uniapp基础_新课uniapp零基础入门到项目打包(微信小程序/H5/vue/安卓apk)全掌握

    课程地址:【新课uniapp零基础入门到项目打包(微信小程序/H5/vue/安卓apk)全掌握】 https://www.bilibili.com/video/BV1mT411K7nW/?p=12share_source=copy_webvd_source=b1cb921b73fe3808550eaf2224d1c155 目录 一、uniapp和HBuilderX介绍 二、uniapp基础 2.1  新建项目、项目目录、预览uni项目 2.1.1 新建项目 2.1.2 项目

    2024年01月20日
    浏览(62)
  • 【uniapp】uniapp打包H5(网页端):

    一、设置appid: 【 注意 】appid是项目的( 不是成员无法打包 ) 二、设置router: 未设置router情况: 三、打包: 【1】CLI 发行uni-app到H5:https://hx.dcloud.net.cn/cli/publish-h5 【 注意 】cli命令打包h5报错:找不到接受实际参数“–platform”的位置形式参数 【2】HBuilderX 发行=》网站-

    2024年02月13日
    浏览(45)
  • 【b站咸虾米】chapter3_vue基础_新课uniapp零基础入门到项目打包(微信小程序/H5/vue/安卓apk)全掌握

    课程地址:【新课uniapp零基础入门到项目打包(微信小程序/H5/vue/安卓apk)全掌握】 https://www.bilibili.com/video/BV1mT411K7nW/?p=12share_source=copy_webvd_source=b1cb921b73fe3808550eaf2224d1c155 目录 三、vue基础 3.1 vue介绍与传统js的差异化  3.2 模板语法 3.3 data属性 3.4 条件渲染  3.4.1 v-if和v-else 3.4

    2024年01月21日
    浏览(182)
  • 【b站咸虾米】chapter4_vue组件_新课uniapp零基础入门到项目打包(微信小程序/H5/vue/安卓apk)全掌握

    课程地址:【新课uniapp零基础入门到项目打包(微信小程序/H5/vue/安卓apk)全掌握】 https://www.bilibili.com/video/BV1mT411K7nW/?p=12share_source=copy_webvd_source=b1cb921b73fe3808550eaf2224d1c155 uni-app官网 组件,无论是小程序还是vue,都是非常关键的。 现在单页面程序,主要的依据就是组件。 组件

    2024年01月20日
    浏览(64)
  • 【uniapp】多端打包(h5...)

    HBuilder X - 项目目录中manifest.json 发行 查看打包文件(用浏览器打开就行了) 或者直接运行在浏览器中

    2024年04月14日
    浏览(61)
  • 【go语言开发】go项目打包成Docker镜像,包括Dockerfile命令介绍、goctl工具生成

    本文主要介绍如何将go项目打包成镜像,首先介绍Dockerfile常用命令介绍,然后介绍使用工具goctl用于生成Dockerfile,还可以根据需求自定义指令内容,最后讲解如何将go-blog项目打包成镜像,以及如何运行等 参考文档: docker日常使用,编写dockerfile等 dockerfile编写 开发完项目之后

    2024年01月20日
    浏览(50)
  • uniapp打包h5部署到服务器

    在学习uniapp,部署前后端分离项目。将h5的dist文件打包好后一直在考虑如何通过nginx反向代理到后端接口,整了半天也没整成。最后才发现,uniapp打包的h5页面包好像不需要反向代理到后端接口,只需要通过nginx将dist下的h5包代理了,直接访问后端接口即可。如果不知道如何打

    2024年02月01日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包