uniapp项目怎么改为命令行打包

最新推荐文章于 2025-09-20 14:45:42 发布

原创最新推荐文章于 2025-09-20 14:45:42 发布 · 1.6k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app

将 uni-app 项目改为命令行打包，可以通过以下步骤实现。这不仅能提高打包效率，还能更好地与 CI/CD 流程集成。

如果项目是通过 HBuilderX 创建的，可以保留 HBuilderX 用于日常开发，但打包操作将通过命令行完成。

第一步：新建src目录

把常规项目全部源码移动至src目录里。

第二步：根目录新建index.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<script>
			var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
				CSS.supports('top: constant(a)'))
			document.write(
				'<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
				(coverSupport ? ', viewport-fit=cover' : '') + '" />')
		</script>
		<title></title>
	</head>
	<body>
		<div id="app"><!--app-html--></div>
		<script type="module" src="/src/main.js"></script>
	</body>
</html>

第三步：新建package.json

{
	"name": "diygw-uniapp",
	"version": "0.0.0",
	"scripts": {
		"dev:app": "uni -p app",
		"dev:app-android": "uni -p app-android",
		"dev:app-ios": "uni -p app-ios",
		"dev:custom": "uni -p",
		"dev:h5": "uni",
		"dev:h5:ssr": "uni --ssr",
		"dev:mp-alipay": "uni -p mp-alipay",
		"dev:mp-baidu": "uni -p mp-baidu",
		"dev:mp-jd": "uni -p mp-jd",
		"dev:mp-kuaishou": "uni -p mp-kuaishou",
		"dev:mp-lark": "uni -p mp-lark",
		"dev:mp-qq": "uni -p mp-qq",
		"dev:mp-toutiao": "uni -p mp-toutiao",
		"dev:mp-weixin": "uni -p mp-weixin",
		"dev:quickapp-webview": "uni -p quickapp-webview",
		"dev:quickapp-webview-huawei": "uni -p quickapp-webview-huawei",
		"dev:quickapp-webview-union": "uni -p quickapp-webview-union",
		"build:app": "uni build -p app",
		"build:app-android": "uni build -p app-android",
		"build:app-ios": "uni build -p app-ios",
		"build:custom": "uni build -p",
		"build:h5": "uni build",
		"build:h5:ssr": "uni build --ssr",
		"build:mp-alipay": "uni build -p mp-alipay",
		"build:mp-baidu": "uni build -p mp-baidu",
		"build:mp-jd": "uni build -p mp-jd",
		"build:mp-kuaishou": "uni build -p mp-kuaishou",
		"build:mp-lark": "uni build -p mp-lark",
		"build:mp-qq": "uni build -p mp-qq",
		"build:mp-toutiao": "uni build -p mp-toutiao",
		"build:mp-weixin": "uni build -p mp-weixin",
		"build:quickapp-webview": "uni build -p quickapp-webview",
		"build:quickapp-webview-huawei": "uni build -p quickapp-webview-huawei",
		"build:quickapp-webview-union": "uni build -p quickapp-webview-union"
	},
	"dependencies": {
		"@dcloudio/uni-app": "3.0.0-3080720230703001",
		"@dcloudio/uni-app-plus": "3.0.0-3080720230703001",
		"@dcloudio/uni-components": "3.0.0-3080720230703001",
		"@dcloudio/uni-h5": "3.0.0-3080720230703001",
		"@dcloudio/uni-mp-alipay": "3.0.0-3080720230703001",
		"@dcloudio/uni-mp-baidu": "3.0.0-3080720230703001",
		"@dcloudio/uni-mp-jd": "3.0.0-3080720230703001",
		"@dcloudio/uni-mp-kuaishou": "3.0.0-3080720230703001",
		"@dcloudio/uni-mp-lark": "3.0.0-3080720230703001",
		"@dcloudio/uni-mp-qq": "3.0.0-3080720230703001",
		"@dcloudio/uni-mp-toutiao": "3.0.0-3080720230703001",
		"@dcloudio/uni-mp-weixin": "3.0.0-3080720230703001",
		"@dcloudio/uni-quickapp-webview": "3.0.0-3080720230703001",
		"vue": "^3.2.45",
		"vue-i18n": "^9.1.9"
	},
	"devDependencies": {
		"sass": "^1.86.3",
		"@dcloudio/types": "^3.3.2",
		"@dcloudio/uni-automator": "3.0.0-3080720230703001",
		"@dcloudio/uni-cli-shared": "3.0.0-3080720230703001",
		"@dcloudio/uni-stacktracey": "3.0.0-3080720230703001",
		"@dcloudio/vite-plugin-uni": "3.0.0-3080720230703001",
		"vite": "4.1.4"
	}
}

第四步：新建 vite.config.js

import {defineConfig} from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
export default defineConfig({
	plugins: [
		uni(),
	],
})

第五步：新建jsconfig.json

{
	"compilerOptions": {
		"types": [
			"@dcloudio/types",
			"miniprogram-api-typings",
			"mini-types"
		]
	}
}

第六步：安装项目依赖

进入项目根目录，安装项目所需的依赖：npm install

第七步：打包

执行命令行打包,其实就是参照第三步里的命令执行就可以了
打包 H5
在终端中运行：
npm run build:h5
打包完成后，生成的文件会位于 dist/build/h5 目录下。

打包 App
运行以下命令打包 App（iOS/Android）：
npm run build:app-plus
打包完成后，生成的文件会位于 dist/build/app-plus 目录下。

打包微信小程序
运行以下命令打包微信小程序：
npm run build:mp-weixin
打包完成后，生成的文件会位于 dist/build/mp-weixin 目录下。