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

最新推荐文章于 2024-05-15 14:21:13 发布
最新推荐文章于 2024-05-15 14:21:13 发布
阅读量3.2k 收藏 2
点赞数 2
分类专栏： UNI-APP 前端 javaScript 文章标签： node.js uni-app 自动化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jastalented/article/details/132403952
版权
UNI-APP 同时被 3 个专栏收录
6 篇文章 0 订阅
订阅专栏
前端
5 篇文章 1 订阅
订阅专栏
javaScript
3 篇文章 0 订阅
订阅专栏

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

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

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

菜又爱编程
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 7
    评论
专栏目录
uni-APP项目开发
m0_71540335的博客
06-14 1452
在项目中manifest.json文件可以配置H5、小程序、App信息，如配置代理，H5模板以及小程序AppID、App的名称、图标、权限等。阮一峰的flex教程：https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html。App.vue是我们的跟组件，所有页面都是在App.vue下进行切换的，是页面入口文件，可以调用应用的生命周期函数。Vue官网：https://cn.vuejs.org/v2/guide/static静态资源目录，例如图片等。
Hbuilder创建uni-app项目配置依赖(node-modules)
热门推荐
IT_CRH的博客
03-24 2万+
Hbuilder创建uni-app项目，为项目配置依赖
uniapp项目通过HbuilderX CLI进行自动化打包成apk【初出茅庐】
lwd4039的博客
11-02 3989
使用HbuilderX的可视化界面打包不得不说是非常方便，云打包但是事实上，当你试图于对开发和打包的任务进行分离的时候，会发现可视化打包不符合你的需求，它无疑提高了后者的时间成本，并让进行后者操作的人一脸蒙圈，我在干啥，这个开发完打包不就行了，产生了对分离这个任务的决定的怀疑。当我想进行这项打包操作的时候，这个打包的时间成本，无疑需要加上由开发到发版的响应成本，这是损耗更有价值事情的成本。那这份成本，就需要我们进行降低
【高效运维】Jenkins之uni-app自动化部署
邓邓子的博客
03-30 7086
目录一、前言二、使用 Pipeline 创建任务1.创建一个流水线任务2.配置流水线（1）配置构建触发器（2）配置流水线（Pipeline script from SCM）3.配置 Gitlab Webhook4.测试 一、前言 本文在 Jenkins集成Gitlab、Pipeline实现自动化部署（高级篇） 一文的基础上进一步完善，实现 uni-app 项目的自动化部署。 二、使用 Pipeline 创建任务 1.创建一个流水线任务 点击菜单项 “新建任务”，输入任务名称，复制之前已生成的流水线任务，点
Vue3+Uniapp小程序自动化打包上传
最新发布
weixin_43218691的博客
05-15 384
使用 vue-cli 搭建的小程序, 当项目开发完成后，需要打包上传小程序代码：在命令行执行打包小程序，然后在对应平台的【开发者工具】导入 dist/build/mp-xxx 文件夹，打开项目，上传小程序。流程较多, 比较繁琐。所以采用小程序自动化打包上传并且集成到发布平台实现真正的一键上传。
【uniapp】Uniapp cli 自动化打包脚本实现
欢迎来到☆槿畔☆的博客
12-26 1548
uniapp只能在hbuildx中进行配置打包app，本文设计借助cli实现本地cmd打包
uniapp小程序端普通二维码，彩色二维码，艺术二维码的生成
05-17
uniapp小程序端普通二维码，彩色二维码，艺术二维码的生成
uni-app 安装node_module模块
笨笨CEO的博客
04-24 2万+
问题：uni-app 开发中调用uni的方法是控制台报错，Module build failed (from ./node_modules/babel-loader/lib/index.js 1，本地安装node --- 2，以管理员身份打开cmd命令工具，进入项目的文件夹下，执行 npm install @babel/core @babel/preset-env 注意：如果不是管理员身...
vue表单级别状态管理（vuex plugin 插件使用分享）
lwx931449660的博客
11-11 2422
分享重点： 1，组件级状态管理（vuex）的使用 2，vuex plugin 使用 3，表单数据处理 上面三个其实是互相嵌套，相互制约，共同协作来完成任务的。 1，在当前组件根目录注册store，新建store.js 文件，如下： import Vue from 'vue' import { SET, EDITED, LOAD, MERGE, SELECT_CARRIER_SUG } from './constants' // 常量 import adaptor from './adapt
解决Vue-cli npm run build生产环境打包,本地不能打开的问题
10-17
今天小编就为大家分享一篇解决Vue-cli npm run build生产环境打包,本地不能打开的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
基于vue-cli npm run build之后vendor.js文件过大的解决方法
10-17
今天小编就为大家分享一篇基于vue-cli npm run build之后vendor.js文件过大的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue微商城项目源码-vue-shop（适用于Node.js 10.x）.zip
06-06
通过理解项目的结构、配置和流程，开发者可以学习到Vue.js的组件化开发、路由管理以及与Node.js后端的协作方式，进一步提升全栈开发能力。在实际操作过程中，注意保持前后端的版本一致性，以确保项目正常运行。
【uni-app】—3.新建一个uni-app项目
m0_37616866的博客
09-09 986
新建一个uni-app项目
【uni-app】微信小程序开发 node_modules 模块丢失问题
我的博客
10-09 9226
安装 copy-webpack-plugin 复制插件【node_modules不是uni-app的默认目录，不会被打包进。运行小程序开发工具，出现node_modules文件夹即表示配置成功，配置成功后就可以快乐的玩耍了！】，安装完后在项目根目录新建 vue.config.js 文件进行配置。在 vue.config.js 文件中添加以下内容。
将小程序原生异步函数promisify后，在async/await中使用
weixin_40425232的博客
10-16 1127
app.js代码： const promisify = require('./lib/promisify.js') App({ globalData: {}, chooseImage: promisify(wx.chooseImage), showActionSheet: promisify(wx.showActionSheet), onLaunch:func...
uni-app自定义打包目录package.json命令配置
知之为知之，不知为不知
02-18 9854
uni-app 使用 npm run build 命令打包，会根据环境生成不同的目录文件。 开发和测试环境会生成到 dev 文件夹，而生产环境则生成到 build 文件。 为了方便自动化部署，需要统一一下打包目录，需要修改一下 package.json 文件： "build:dev": "cross-env NODE_ENV=development UNI_PLATFORM=h5 UNI_OUTPUT_DIR=dist/build/h5 vue-cli-service uni-build", 增加
uni-app配置开发、测试、生产等多环境，process.env
qq_35430000的博客
08-03 1万+
"scripts": { "dev": "cross-env NODE_ENV=development VUE_APP_MOD=dev UNI_PLATFORM=h5 VUE_APP_PLATFORM=h5 vue-cli-service uni-serve", "build:sit": "cross-env NODE_ENV=production VUE_APP_MOD=sit UNI_PLATFORM=h5 VUE_APP_PLATFORM=h5 UNI_OUTPUT_DIR=dist.
uniapp使用cli脚手架创建兼容小程序和h5的项目 自动化命令打包运行
Gblfy_Blog
04-19 2961
uniapp使用cli脚手架创建兼容小程序和h5的项目 自动化命令打包运行
二、 Uni-app的关键技术：深入剖析Uni-app的关键技术，包括Vue.js框架、Webpack打包工具、H5+API等。
06-09
Uni-app的关键技术主要包括以下几个方面： 1. Vue.js框架：Uni-app使用Vue.js作为主要的开发框架，Vue.js是一款轻量级的前端框架，具有数据驱动、组件化等特点，可以让开发人员快速构建应用程序。 2. Webpack打包工具：Uni-app使用Webpack打包工具，可以将多个文件打包成一个文件，减少网络请求次数，提高应用程序的性能。 3. H5+ API：Uni-app使用H5+ API，提供了一些原生API的封装，可以在应用中调用原生功能，如获取设备信息、调用相机等。 4. 代码分割：Uni-app支持代码分割，可以将应用程序分成多个模块，按需加载，提高应用程序的性能。 5. 跨平台适配：Uni-app使用了多种技术来实现跨平台适配，包括CSS样式适配、组件适配、API适配等，可以让应用程序在多个平台上运行时有更好的表现。 综上所述，Uni-app的关键技术主要包括Vue.js框架、Webpack打包工具、H5+ API等，这些技术共同构成了Uni-app的核心特点，使得开发人员可以快速构建跨平台应用程序，并且具有优秀的性能和用户体验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

菜又爱编程

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

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

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

打赏作者

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

抵扣说明：

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

余额充值