把vue项目打包成安卓安装包apk
对于一些简单的安卓app功能可以使用自己更认识的vue转apk来快速实现。1.下载HBuilder X
https://i-blog.csdnimg.cn/direct/ee2e2b72a3b7438c9a7aba21ff1328d4.png
2.准备好自己的vue项目
这里使用的是二维码扫码功能的页面，只有ScanCoder.vue是自己写的扫码页面
https://i-blog.csdnimg.cn/direct/35d7b764a44c44499e64a927dc752714.png
3.把vue项目打包
npm run build
https://i-blog.csdnimg.cn/direct/3a917be24d7749cd93614768adb56cf4.png
得到dist文件夹
https://i-blog.csdnimg.cn/direct/eb340adcb90e49e9a879ba4a13792968.png
没有static文件夹也不要急，下面设置会解释缘故原由，
注意这里尝试打开index.html看看你的页面是否能正常表现：这里一样平常是资源路径问题，相信各位吴彦祖都能快速办理呢，假如不能请按照以下设置修改部分vue项目文件，
设置文件vue.config.js设置
const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
transpileDependencies: true,
lintOnSave: false, // 只需要在原有的语句的基础上加上这一句
publicPath: "./",
/* 输出文件目录：在npm run build时，生成文件的目录名称 */
outputDir: "./dist",
/* 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录 */
assetsDir: "static",
/* 是否在构建生产包时生成 sourceMap 文件，false将提高构建速度 */
productionSourceMap: false,
/* 默认情况下，生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存，你可以通过将这个选项设为 false 来关闭文件名哈希。(false的时候就是让原来的文件名不改变) */
devServer: {
/* 自动打开浏览器 */
open: true,
// proxy: {
// '/api': {
// target: 'http://localhost:3000', // 这里是你本地服务器的地址
// changeOrigin: true,
// pathRewrite: {
// '^/api': '',
// },
// },
// }
},
}); 假如index.html还是打不开修改一下index.html里资源的相对路径把 ./statict/ 删除
原来的src：
https://i-blog.csdnimg.cn/direct/8c5d4d76db314401b506b06fd05f3aea.png
现在的src：
https://i-blog.csdnimg.cn/direct/8e4a0d31999145f5b6c56228839ed100.png
4.创建app项目
选择如下参数，5+App，命名，路径，默认模板
https://i-blog.csdnimg.cn/direct/31908ff6b63a49a2b5efc1e94708c362.png
5.把vue的打包文件放入app目录下
注意这里同名的文件夹是 一 一对应的，注意文件相对的路径哦
https://i-blog.csdnimg.cn/direct/b20af305d39448b78cd8e0e9f531637e.pnghttps://i-blog.csdnimg.cn/direct/cc258c653e044757b04630a9116101ac.png
6.设置app参数，并申请AppID（免费勒）
https://i-blog.csdnimg.cn/direct/508e257589794b85aa597c2d1df6e6a0.png
此处最关键的设置是AppID，必要自己去申请注册
注册官网：开发者中心https://csdnimg.cn/release/blog_editor_html/release2.3.7/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=O83Ahttps://dev.dcloud.net.cn/pages/app/list这里可以看到自己申请的AppID
https://i-blog.csdnimg.cn/direct/2b7f7b2ea1a6473f93c03992964f6a27.png
点击创建应用，提交后返回就有了AppID：
https://i-blog.csdnimg.cn/direct/0305aeb57db64dc8bb17d4db6028ad7f.png
OK以上便是最基础的设置，其他的设置都很简单（能看懂中文就行）记得ctrl+s保存自己的设置
7.apk打包
点击->发行->原生App-云打包
https://i-blog.csdnimg.cn/direct/18aa686ff4004793ba1c51bc48af3020.png
注意红框这部分的设置，
1.选择你要的包
2.选择公共的测试证书（正式环境记得修改）
3.你也不想开屏广告吧，全取消
4.选择快速打包
https://i-blog.csdnimg.cn/direct/70583e1599344bd7aab4822666a517ee.png
https://i-blog.csdnimg.cn/direct/5dce744b246247f782955e71f196dbd8.png
8.等待完成，OK乐成获取apk
等待，运气好人少的时候可以很快，运气不好的话就。。。。。悲剧了（开始摸鱼^_^）https://i-blog.csdnimg.cn/direct/a6af3827f65d431a8f95ae05b8b91031.png
https://i-blog.csdnimg.cn/direct/db07c9ff036949459d662a5429d41e7b.png
结果：
https://i-blog.csdnimg.cn/direct/2d649008f1f14cd5be7639b72e5f0566.jpeg
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]