【uni-app】自动化部署流水线node.js方式，通过vue-cli，npm run build打包

最新推荐文章于 2025-04-06 15:17:10 发布
最新推荐文章于 2025-04-06 15:17:10 发布
阅读量4.5k 收藏 7
点赞数 4
分类专栏： UNI-APP 前端 javaScript 文章标签： node.js uni-app 自动化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/jastalented/article/details/132403952
版权
本文详细描述了如何在云效Codeup中使用vue-cli创建uniapp工程，安装node-sass和sass-loader，以及配置打包流程，以便实现自动化部署并支持多种平台。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

uniapp自动化部署流水线，通过vue-cli-serve npm run build打包来完成

一、需求背景

接到公司需求，要求在云效Codeup创建流水线对发布版本进行控制，流水线作用，可以回滚到以前发布的版本；由于之前创建项目工程是通过HbuilderX可视化方式创建的工程，只能通过HbuilderX打包，现在要求通过vue-cli方式打包，这样才能实现通过node.js方式完成流水线自动化部署；废话不多说了，直接开始操作

二、node环境版本

在这里插入图片描述

这里是我调试通过的版本，其他验证的一些版本下载node-sass,sass-loader会报错，可能其他版本能通过，先完成工作，有空研究研究

三、新建一个新的工程

uniapp cli工程创建，uniapp cli官方文档

1、环境安装

全局安装 vue-cli

npm install -g @vue/cli

2、创建uni-app

  • 使用正式版（对应HBuilderX最新正式版）
vue create -p dcloudio/uni-preset-vue my-project
  • 使用alpha版（对应HBuilderX最新alpha版）
vue create -p dcloudio/uni-preset-vue#alpha my-alpha-project

bash命令运行成功后选择默认模板，然后等待运行完成，这样就创建好了一个新的项目
在这里插入图片描述

npm run dev:%PLATFORM%
npm run build:%PLATFORM%

如果运行 vue create -p dcloudio/uni-preset-vue my-project 报错，不能创建项目，这时我们就换一种方式来创建项目，
在这里插入图片描述

vue create -p '下载解压后的文件夹路径' my-project

在这里插入图片描述

3、创建好项目进行修改

  • 创建好的项目如下
    在这里插入图片描述
  • 打开项目，将之前的uniapp工程全部复制粘贴到新建项目src目录里面，遇到重复文件替换目标文件
    在这里插入图片描述
  • 修改main.js ，如果原来有就不用改，没有就加上 import ‘./uni.promisify.adaptor’，目的是保持新创建项目一致
    在这里插入图片描述

四、安装node-sass ,sass-loader

npm install node-sass@4.14.1 --save
npm install sass-loader@7.1.0 --save
  • 运行npm run serve
npm run serve

在这里插入图片描述
运行成功，查看运行的工程是否正确，检查完成没有问题，就可以打包了

npm run build
  • npm run build 默认是打包H5工程包，若是需要打包其他平台，如下方式，package.json脚本：
    在这里插入图片描述

五、如上方式报错出问题啦,不想配置快捷方式

  • 创建好新工程 ,第二步：创建uni-app
  • node版本还是前面提到的版本
  • 删除node_modules, package-lock.json
  • 复制如下package.json内容到工程的package.json，Ctrl+C,Ctrl+A,Ctrl+v，替换新创建工程package.json
  • package.json文件内容如下：
{
  "name": "uniapp-build",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "npm run dev:h5",
    "build": "npm run build:h5",
    "build:app-plus": "cross-env NODE_ENV=production UNI_PLATFORM=app-plus vue-cli-service uni-build",
    "build:custom": "cross-env NODE_ENV=production uniapp-cli custom",
    "build:h5": "cross-env NODE_ENV=production UNI_PLATFORM=h5 vue-cli-service uni-build",
    "build:mp-360": "cross-env NODE_ENV=production UNI_PLATFORM=mp-360 vue-cli-service uni-build",
    "build:mp-alipay": "cross-env NODE_ENV=production UNI_PLATFORM=mp-alipay vue-cli-service uni-build",
    "build:mp-baidu": "cross-env NODE_ENV=production UNI_PLATFORM=mp-baidu vue-cli-service uni-build",
    "build:mp-jd": "cross-env NODE_ENV=production UNI_PLATFORM=mp-jd vue-cli-service uni-build",
    "build:mp-kuaishou": "cross-env NODE_ENV=production UNI_PLATFORM=mp-kuaishou vue-cli-service uni-build",
    "build:mp-lark": "cross-env NODE_ENV=production UNI_PLATFORM=mp-lark vue-cli-service uni-build",
    "build:mp-qq": "cross-env NODE_ENV=production UNI_PLATFORM=mp-qq vue-cli-service uni-build",
    "build:mp-toutiao": "cross-env NODE_ENV=production UNI_PLATFORM=mp-toutiao vue-cli-service uni-build",
    "build:mp-weixin": "cross-env NODE_ENV=production UNI_PLATFORM=mp-weixin vue-cli-service uni-build",
    "build:mp-xhs": "cross-env NODE_ENV=production UNI_PLATFORM=mp-xhs vue-cli-service uni-build",
    "build:quickapp-native": "cross-env NODE_ENV=production UNI_PLATFORM=quickapp-native vue-cli-service uni-build",
    "build:quickapp-webview": "cross-env NODE_ENV=production UNI_PLATFORM=quickapp-webview vue-cli-service uni-build",
    "build:quickapp-webview-huawei": "cross-env NODE_ENV=production UNI_PLATFORM=quickapp-webview-huawei vue-cli-service uni-build",
    "build:quickapp-webview-union": "cross-env NODE_ENV=production UNI_PLATFORM=quickapp-webview-union vue-cli-service uni-build",
    "dev:app-plus": "cross-env NODE_ENV=development UNI_PLATFORM=app-plus vue-cli-service uni-build --watch",
    "dev:custom": "cross-env NODE_ENV=development uniapp-cli custom",
    "dev:h5": "cross-env NODE_ENV=development UNI_PLATFORM=h5 vue-cli-service uni-serve",
    "dev:mp-360": "cross-env NODE_ENV=development UNI_PLATFORM=mp-360 vue-cli-service uni-build --watch",
    "dev:mp-alipay": "cross-env NODE_ENV=development UNI_PLATFORM=mp-alipay vue-cli-service uni-build --watch",
    "dev:mp-baidu": "cross-env NODE_ENV=development UNI_PLATFORM=mp-baidu vue-cli-service uni-build --watch",
    "dev:mp-jd": "cross-env NODE_ENV=development UNI_PLATFORM=mp-jd vue-cli-service uni-build --watch",
    "dev:mp-kuaishou": "cross-env NODE_ENV=development UNI_PLATFORM=mp-kuaishou vue-cli-service uni-build --watch",
    "dev:mp-lark": "cross-env NODE_ENV=development UNI_PLATFORM=mp-lark vue-cli-service uni-build --watch",
    "dev:mp-qq": "cross-env NODE_ENV=development UNI_PLATFORM=mp-qq vue-cli-service uni-build --watch",
    "dev:mp-toutiao": "cross-env NODE_ENV=development UNI_PLATFORM=mp-toutiao vue-cli-service uni-build --watch",
    "dev:mp-weixin": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch",
    "dev:mp-xhs": "cross-env NODE_ENV=development UNI_PLATFORM=mp-xhs vue-cli-service uni-build --watch",
    "dev:quickapp-native": "cross-env NODE_ENV=development UNI_PLATFORM=quickapp-native vue-cli-service uni-build --watch",
    "dev:quickapp-webview": "cross-env NODE_ENV=development UNI_PLATFORM=quickapp-webview vue-cli-service uni-build --watch",
    "dev:quickapp-webview-huawei": "cross-env NODE_ENV=development UNI_PLATFORM=quickapp-webview-huawei vue-cli-service uni-build --watch",
    "dev:quickapp-webview-union": "cross-env NODE_ENV=development UNI_PLATFORM=quickapp-webview-union vue-cli-service uni-build --watch",
    "info": "node node_modules/@dcloudio/vue-cli-plugin-uni/commands/info.js",
    "serve:quickapp-native": "node node_modules/@dcloudio/uni-quickapp-native/bin/serve.js",
    "test:android": "cross-env UNI_PLATFORM=app-plus UNI_OS_NAME=android jest -i",
    "test:h5": "cross-env UNI_PLATFORM=h5 jest -i",
    "test:ios": "cross-env UNI_PLATFORM=app-plus UNI_OS_NAME=ios jest -i",
    "test:mp-baidu": "cross-env UNI_PLATFORM=mp-baidu jest -i",
    "test:mp-weixin": "cross-env UNI_PLATFORM=mp-weixin jest -i"
  },
  "dependencies": {
    "@dcloudio/uni-app": "^2.0.2-3081220230817001",
    "@dcloudio/uni-app-plus": "^2.0.2-3081220230817001",
    "@dcloudio/uni-h5": "^2.0.2-3081220230817001",
    "@dcloudio/uni-i18n": "^2.0.2-3081220230817001",
    "@dcloudio/uni-mp-360": "^2.0.2-3081220230817001",
    "@dcloudio/uni-mp-alipay": "^2.0.2-3081220230817001",
    "@dcloudio/uni-mp-baidu": "^2.0.2-3081220230817001",
    "@dcloudio/uni-mp-jd": "^2.0.2-3081220230817001",
    "@dcloudio/uni-mp-kuaishou": "^2.0.2-3081220230817001",
    "@dcloudio/uni-mp-lark": "^2.0.2-3081220230817001",
    "@dcloudio/uni-mp-qq": "^2.0.2-3081220230817001",
    "@dcloudio/uni-mp-toutiao": "^2.0.2-3081220230817001",
    "@dcloudio/uni-mp-vue": "^2.0.2-3081220230817001",
    "@dcloudio/uni-mp-weixin": "^2.0.2-3081220230817001",
    "@dcloudio/uni-mp-xhs": "^2.0.2-3081220230817001",
    "@dcloudio/uni-quickapp-native": "^2.0.2-3081220230817001",
    "@dcloudio/uni-quickapp-webview": "^2.0.2-3081220230817001",
    "@dcloudio/uni-stacktracey": "^2.0.2-3081220230817001",
    "@dcloudio/uni-stat": "^2.0.2-3081220230817001",
    "@vue/shared": "^3.0.0",
    "autoprefixer": "^8.0.0",
    "core-js": "^3.8.3",
    "flyio": "^0.6.2",
    "node-sass": "^4.14.1",
    "postcss": "^8.2.2",
    "postcss-loader": "^7.3.3",
    "sass-loader": "^7.1.0",
    "vue": ">= 2.6.14 < 2.7",
    "vuex": "^3.2.0"
  },
  "devDependencies": {
    "@dcloudio/types": "^3.3.2",
    "@dcloudio/uni-automator": "^2.0.2-3081220230817001",
    "@dcloudio/uni-cli-i18n": "^2.0.2-3081220230817001",
    "@dcloudio/uni-cli-shared": "^2.0.2-3081220230817001",
    "@dcloudio/uni-helper-json": "*",
    "@dcloudio/uni-migration": "^2.0.2-3081220230817001",
    "@dcloudio/uni-template-compiler": "^2.0.2-3081220230817001",
    "@dcloudio/vue-cli-plugin-hbuilderx": "^2.0.2-3081220230817001",
    "@dcloudio/vue-cli-plugin-uni": "^2.0.2-3081220230817001",
    "@dcloudio/vue-cli-plugin-uni-optimize": "^2.0.2-3081220230817001",
    "@dcloudio/webpack-uni-mp-loader": "^2.0.2-3081220230817001",
    "@dcloudio/webpack-uni-pages-loader": "^2.0.2-3081220230817001",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "babel-plugin-import": "^1.11.0",
    "cross-env": "^7.0.2",
    "jest": "^25.4.0",
    "mini-types": "*",
    "miniprogram-api-typings": "*",
    "postcss-comment": "^2.0.0",
    "vue-template-compiler": ">= 2.6.14 < 2.7"
  },
  "browserslist": [
    "Android >= 4.4",
    "ios >= 9"
  ],
  "uni-app": {
    "scripts": {}
  }
}
  • 执行 npm install
npm install
npm run serve
npm run build

执行到这儿，就大工告成了

不常写文章，若有帮助请帮帮忙点赞，若有问题或有不对的地方请留言，及时改正。谢谢了

【高效运维】Jenkins之uni-app自动化部署
邓邓子的博客
03-30 7809
目录一、前言二、使用 Pipeline 创建任务1.创建一个流水线任务2.配置流水线（1）配置构建触发器（2）配置流水线（Pipeline script from SCM）3.配置 Gitlab Webhook4.测试 一、前言 本文在 Jenkins集成Gitlab、Pipeline实现自动化部署（高级篇） 一文的基础上进一步完善，实现 uni-app 项目的自动化部署。 二、使用 Pipeline 创建任务 1.创建一个流水线任务 点击菜单项 “新建任务”，输入任务名称，复制之前已生成的流水线任务，点
小兔鲜儿 uniapp - 项目打包
每天都要努力学习哦~~
01-04 1604
条件编译支持: 支持 .vue, .ts, .js, .scss, .css, pages.json 等文件。Q：按照 uni-app 规范开发可保证多平台兼容，但每个平台有自己的一些特性，该如何处理？把当前 uni-app 项目打包成网页(H5)端，并配置路由基础路径。把当前 uni-app 项目打包成微信小程序端，并发布上线。根路径，部分网站并不是部署到根路径，需要按运维要求调整。项目打包上线需要使用到多个工具，注意工具之间的职责。的打包，预览、测试、发行，使用。，让代码按条件编译到指定平台。
高效开发：uniapp 自动打包部署微信小程序流程全攻略
weixin_45020094的博客
01-20 964
是否存在这样一种方式，能让小程序的部署如同部署后台管理系统那般简易便捷？只需一条指令，或者轻轻一次点击，所有部署流程便能自动完成，当然有！只是在最后面新增了执行js文件&&node./upload.js执行的就是上传的js文件。在现有的小程序开发流程里，打包操作颇为繁杂。因为自动上传需要依赖miniprogram-ci，安装一下。刚创建项目时有很多指令，我只留下了打包微信的指令。生成密钥，暂时关闭白名单（打通流程后建议打开）在项目根目录下新建一个上代码的js文件。生成密钥后下载到项目下。
uniapp项目结构改造及优化，支持自动化部署和不同环境的发布需求
jww_1993的博客
08-26 1669
uniapp项目结构改造及优化，支持自动化部署和不同环境的发布需求
uniapp+vite项目中node_modules改变，热更新无效
最新发布
HOO00oo的博客
04-06 306
现状：通过 workspaces 方式组织 uniapp 项目，组件库在一个工作区，小程序代码在另一个工作区。问题：npm run dev:mp-weixin ，无法监听 组件库代码的修改。原因：vite 默认会忽略监听 node_modules 中的文件。
uniapp小程序自动化部署
zhw_1219的博客
08-08 531
uniapp微信小程序自动化部署
uniapp项目自动化部署Jenkins，通过命令运行hbuilder打包项目
yuansu_727的博客
02-06 1504
hbuilder创建的uniapp项目，无法直接使用npm运行打包，可以通过hbuilder cli,服务器安装编辑器来打包项目
uniapp项目自动部署 uniapp项目命令方式启动
OneHandOfVoice的博客
06-05 2991
uniapp项目自动部署 uniapp项目命令方式启动
uniapp老项目添加自动化部署并配置多环境
impossible1994727的博客
11-01 1926
我司其他项目都是通过jenkins打包部署的，只有uniapp项目要前端通过hbuilderx手动打包上传到git，为了方便操作，配置多环境，线上打包，改造老项目！
uniapp安装node.js
cv789的博客
08-28 533
7 接口 默认3000，在写接口的时候 需要改为本的IP。6 成功了需要在重启一下 npm start。8 查看本机 ip 并替换。
uniapp的h5改成用npm打包
qq_46131497的博客
07-30 1478
1.缺少node-sass，我node版本是14.17.0，对应下载的node-sass是4.14.0，有时候会因为网络问题，请用vpn，2.如果要切换node版本，要记得把node_modules和package-lock.json删除，然后再切换node版本重新下载依赖，npm install -g @vue/cli@3.11.0（指定版本安装【指定版本为3.0以上版本】，其中3.11.0为版本号）npm view vue-cli versions --json （3.0以下版本）
uni-auto-pages:uni-app 自动配置pages.json
05-31
uni-auto-pages uni-app 开发中根据规则自动配置页面 pages，分包 subPackages,和 condition 生成 pages.josn 的 webpack 插件，使得开发者不需要手动的去维护 pages.json。类似 vue-auto-routing,使用非常简单。 安装 npm install uni-auto-pages 首先通过 vue-cli 创建 uni-app 项目 vue.config.js 配置 *注：template.json 参数是模版文件名 必须在 src 下，文件名可以自定义 默认名 template.json const UniAutoPagesPlugin = require('uni-auto-pages'); module.exports = { configureWebpack: { plugins: [new
【uniapp】Uniapp cli 自动化打包脚本实现
欢迎来到☆槿畔☆的博客
12-26 3475
uniapp只能在hbuildx中进行配置打包app，本文设计借助cli实现本地cmd打包
09uniapp项目打包
weixin_47039303的博客
05-18 299
1.创建组件(生命周期和vue一样,但uniapp的app.vue不是这个) 1.创建一个组件有vue文件的 vue的选项写 import test from '../../components/test.vue' components:{ test //test:test }, //页面直接用 <test></test> 2.生命周期的创建是指数据 mount是指视图页面 beforeCreate->create
uni-app 微信小程序CI机器人自动化部署方案
野蛮女孩的博客
01-29 1108
【代码】uni-app 微信小程序CI机器人自动化部署方案。
uniapp项目通过HbuilderX CLI进行自动化打包成apk【初出茅庐】
lwd4039的博客
11-02 4634
使用HbuilderX的可视化界面打包不得不说是非常方便，云打包但是事实上，当你试图于对开发和打包的任务进行分离的时候，会发现可视化打包不符合你的需求，它无疑提高了后者的时间成本，并让进行后者操作的人一脸蒙圈，我在干啥，这个开发完打包不就行了，产生了对分离这个任务的决定的怀疑。当我想进行这项打包操作的时候，这个打包的时间成本，无疑需要加上由开发到发版的响应成本，这是损耗更有价值事情的成本。那这份成本，就需要我们进行降低
Node.js之模块机制
weixin_43243583的博客
09-21 982
文章原创于公众号：程序猿周先森。本平台不定时更新，喜欢我的文章，欢迎关注我的微信公众号。 其实在JavaScript的发展中，它主要是在浏览器前端中被应用广泛。因为在实际应用中， JavaScript的表现能力主要取决于宿主环境的API支持程度， 在最早期，只有对BOM, DOM的支持，随着HTML5的出现，在浏览器中出现了更多，更强大的API供JavaScript调用，但是这些都是发生在...
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略（微信小程序、H5、APP全覆盖）
在这里，我乐于倾囊相授，分享我的技术心得、项目实战经验、技术技巧。希望能够惠及更多的开发者，助力大家在技术的海洋中扬帆远航。
10-21 7121
如果你使用的是 webpack v5 或以上版本，你不需要安装这个插件。uni cli在App平台，仅支持生成离线打包的wgt资源包，不支持云端打包生成apk/ipa；此时，会提示选择项目模板（使用Vue3/Vite版不会提示，目前只支持创建默认模板），初次体验建议选择 hello uni-app 项目模板。在 HBuilderX 中，点击“运行”编译出来的代码是开发环境，点击“发行”编译出来的代码是生产环境。提供有完整的cli 脚手架，可以通过 vue-cli 创建、运行、发行 uni-app 项目。
uni-app 学习node.js安装教程
2301_78189401的博客
06-21 1465
通过本文的介绍，您现在应该知道如何在Windows和Mac上安装Node.js，并运行一个简单的示例应用程序。通过了解Node.js的安装步骤和基本用法，您将可以开始进行更高级的Node.js应用程序开发。在去Node.js的官方网站上下载Node.js的Windows安装包。在我们继续更深入的Node.js开发之前，让我们创建一个简单的Node.js应用程序以测试Node.js是否正常工作。在去Node.js的官方网站上下载Node.js的Mac安装包。打开下载的Node.js安装包，运行安装程序。
uni-app打包H5
01-23
### 使用 Uni-App 进行 H5 打包 #### 准备工作 为了能够顺利地将 Uni-App 项目打包成 H5 并部署至服务器，需先完成一些准备工作。确保本地环境已安装 Node.js 和 npm 或者 yarn 工具，这是运行 Vue CLI 及其插件所必需的基础环境。 #### 修改 `manifest.json` 配置文件 在开始打包之前，建议调整位于根目录下的 `manifest.json` 文件中的配置项来适应目标平台的需求。特别是对于 H5 应用来说，可以在此处设定应用名称、启动页图片以及其他元数据信息[^1]。 ```json { "name": "YourAppName", "description": "A brief description of your app.", ... } ``` #### 安装依赖并构建项目 进入命令行工具，在项目的根目录下执行如下指令以安装所需的全部依赖： ```bash npm install # or yarn install ``` 接着，可以通过下面这条命令来进行针对 H5 的编译操作： ```bash npm run build:h5 # or with Yarn yarn build:h5 ``` 这一步骤会读取源码并将它们转换为适合浏览器解析的形式，最终输出到指定路径下的 dist 文件夹内。 #### 自动化发布流程 (可选) 如果希望简化重复性的手动部署过程，则可以考虑利用 Jenkins CI/CD 流水线配合官方提供的 CLI 命令实现自动化发布的功能。具体做法是在 Jenkins 中创建一个新的 Job，并在其脚本部分加入类似这样的语句: ```bash jenkins-cli.bat publish --platform h5 --project YourProjectName > cli_output.log 2> cli_error.log ``` 上述代码片段展示了如何借助 Jenkins 的远程调用来触发一次完整的 uni-app 构建与上传动作，同时记录日志以便后续排查可能出现的问题[^2]。 #### 实现微信分享功能 (可选) 为了让基于 Uni-App 开发的应用更好地融入社交场景之中，不妨尝试集成来自微信公众平台所提供的 JS SDK 来增强用户体验。比如当用户点击页面上的某个按钮时自动弹出带有预览图标的对话框邀请好友一起参与活动等互动行为都可以通过以下方式轻松达成： ```javascript wx.config({ debug: false, appId: 'your_app_id', timestamp: response.data.timestamp, nonceStr: response.data.nonceStr, signature: response.data.signature, jsApiList: ['updateAppMessageShareData'] }); ``` 这段 JavaScript 代码负责初始化微信内置浏览器内的 API 接口权限校验机制；而真正用于定制分享卡片外观样式的则是另一个名为 `updateAppMessageShareData()` 的函数[^3]。
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

菜又爱编程

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值