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

news2025/1/21 1:02:58

需求:想要自动化部署uni项目,平常的uni项目是通过可视化构建,导致我们的自动部署成了半自动,非常不爽,于是就找到了下面这种方法

首先,用hb新建一个项目
然后,通过cli新建一个项目
文档

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

可以先运行下cli的项目,可能会有一些问题,
Error: Cannot find module ‘webpack/lib/RuleSet‘
这种报错,两种可能性

1、降低cli版本

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

2、降低node版本

可以通过nvm去管理版本
nvm的基本使用
回到正题,我们将hb的项目作为基础
在这里插入图片描述
新建一个src文件将所有文件移入src
然后将刚刚的cli文件中,以下文件拷贝过来
在这里插入图片描述
然后我们通过命令行来运行

npm run serve

顺道修改下首页文字,发现可以更改,大功告成一半
接下来我们来配置一下打包的命令行
在这里插入图片描述
在build这里,我把build区分为了test和prod,
通过UNI_OUTPUT_DIR,来设置打包后生成的文件名和路径

UNI_OUTPUT_DIR=dist/build/h5_prod

通过NODE_ENV,来设置环境变量
最后得到这两个文件,就可以自动部署啦
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/408668.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

禁止 input 自动填充

禁止 input 自动填充 在编写 Form 表单样式的时候,修改自动填充后的 input 样式是很麻烦甚至不可行的,而且还有一些不需要自动填充的场景。 浏览器根据保存数据时表单控件的 type 和 name 去匹配。 常用的就是 type 为 password,name 为 em…

Android 设置Padding和Margin(动态/静态)

一、什么是padding,什么是margin? 在Android界面开发时,为了布局更加合理好看,很多时候会用上Padding和Margin, padding和margin是什么呢?即内边距和外边距; 某个View指定为padding是针对该V…

vue制作一个好看的网页

1.安装并配置node.js (见本人博客-node.js) 2.建好的项目目录如下 build: 用来存放项目构建脚本 config: 存放项目的一些基本配置信息,最常用的就是端口转发 node_modules:这个目录存放项目的所有依赖,由npm install 下载来的文件 src:存放项目的源…

Vue设置浏览器小图标(ICON)

Vue设置浏览器小图标 当我们使用浏览器做开发时,我们能希望浏览器标签页能显示自己的logo小图标,这个是怎样设置的呢? 第一步:准备logo图片信息 找到自己的logo,通过图片在线转换格式,转换成32*32的ico为…

css关于文本溢出

处理思路 1)给需要做溢出处理的文本元素设置width或者max-width 2)超出部分省略 overflow:hidden 3) 文本溢出处理方式 text-overflow: ellipsis | clip | 自定义字符 如:“_” “.” 4) 设置文本不换行 white-space: nowrap 单行文本溢出 …

Rust开发WebAssembly在Html和Vue中的应用【后篇】

【建议先看】继上一篇【Rust开发WebAssembly在Html和Vue中的应用】遗留下来的问题 Rust开发WebAssembly在Html和Vue中的应用_一码超人的博客-CSDN博客 本文讲述Vue2与H5版uniapp如何引入rust webassembly的应用流程 在上一文中末尾,我说过vue2在引入胶水js后执行…

关于vue2与vue3

Vue组件之间通信方式有哪些 vue是组件化开发框架,所以对于vue应用来说组件间的数据通信非常重要。 1. 组件通信常用方式有以下8种: props $emit/$on $children/$parent $attrs/$listeners ref $root eventbus vuex 注意vue3中废弃的几个API 在vue3中废除$c…

前端实现tab栏切换,这么常见的案例你学会了吗?

📋 个人简介 💖 作者简介:大家好,我是阿牛,全栈领域新星创作者。😜📝 个人主页:馆主阿牛🔥🎉 支持我:点赞👍收藏⭐️留言&#x1f4d…

vue2 vue-router 不显示页面问题

目录 菜鸟入门,配置vue-router一直不显示。 排除过的问题点: 项目源码如下: 分析: 解决方案: 可能会遇到错误 这vue-router页面总算出来了: 菜鸟入门,配置vue-router一直不显示。 首先去…

el-cascader数据渲染及回显至页面(以及踩坑历程+解决)

第一次使用el-cascader就把坑踩了个遍,写个记录,也希望能够帮助到同为小猿的你们。 下面是我写的一个还原项目的例子 Bug1 首先是最小子集仍然有children,但是children为空数组,el-cascader渲染时,发现有children所…

【已解决】VUE3+webpack >5报错问题

问题截图: This is no longer the case. Verify if you need this module and configure a polyfill for it.If you want to include a polyfill, you need to:- add a fallback resolve.fallback: { "process": require.resolve("process/browser&q…

微信小程序父子组件之间传值

父子组件之间传值 组件之间传值有两种,一种是父向子传值,另外一种是子向父传值 先说一下大致的区别吧… 区别: 父向子传值使用的是属性绑定,子组件中 的 properties 对象 进行接收父组件传递过来的值子向父传值使用的是自定义…

wangEditor5在vue中的基本使用

目录 一、wangEditor5是什么 二、wangEditor5基本使用 (一)、安装 (二)、编译器引入 (三)、css及变量引入 三、wangEditor5工具栏配置 (一)、editor.getAllMenuKeys() &…

uniapp自定义tabbar(支持中间凸起,角标,动态隐藏tab,全端适用)

uniapp自定义tabbar(支持中间凸起,角标,全端适用)背景思路实现尾巴背景 在使用uniapp进行开发时,tabbar是我们使用的很频繁的一个组件,但是在特定的平台会有一些使用上的限制,无法通过一套代码…

box-sizing:border-box的理解和作用

盒子模型 盒子模型是指:外边距(margin) border(边框) 内边距(padding) content(内容) 可以把每一个容器,比如div,都看做是一个盒子模型 比如你给…

Vue实战【Vue开发中的的前端代码风格规范】

目录🌟前言🌟命名规范1.1 项目文件命名1.1.1 项目名1.1.2 目录名1.1.3 图像文件名1.1.4 HTML 文件名1.1.5 CSS 文件名1.1.6 JavaScript 文件名1.2 Vue 组件命名1.2.1 单文件组件名1.2.2 单例组件名1.2.3 基础组件名1.2.4 业务组件1.2.5 紧密耦合的组件名…

前端开发中常见的浏览器兼容性问题及解决方案

文章目录前言一、浏览器四大内核二、主流兼容问题(一)浏览器引擎(二)兼容问题的原因(三) 为什么浏览器会存在兼容性问题?(四)处理兼容问题的思路1. 要不要做?2. 做到什么…

vue3 | HighCharts实战自定义封装之径向条形图

1.前言 目前正在做vue3的数据可视化项目,vue3的组合式api写法十分方便,可以有各种玩法,有兴趣的同学可以看我个人主页的其他文章。难点是在网上找了一圈的有关径向条形图的示例都没有好的解决方案,决心亲自下手,在其中…

Vue(四)Vue脚手架——手把手教你安装和使用

一、什么是Vue脚手架 之前我们使用Vue框架,都是通过脚本的方式引入Vue脚本,在html中运行,但是这只是入门级的操作,下面我们介绍Vue脚手架。 脚手架:脚手架是一类软件的总称,此类软甲用于生成标准化的项目包…

Vue3中简单使用Mock.js

mock.js简介 官方链接:Mock.js (mockjs.com) 前端开发人员用来模拟虚拟数据,拦截ajax请求,方便模拟后端接口 安装 npm install mockjs 使用 本文主要介绍在Vue项目中使用mock.js,包括axios发送请求与请求简单封装 创建mock文件夹…