admin管理员组

文章数量:1516870

前言

在我的前一个文章，有讲如何实现一个笔记系统

点击跳转到:纯vue实现笔记系统

那么我如果想要分享给我的朋友该怎么办呢?
那么我将带大家去实现打包安卓软件

安卓实际打包软件

也为了更信服，这里提供一个我的打包之后的软件给大家，感兴趣的可以下载安卓看看

  • 链接: 简易笔记打包安装网盘文件
  • 提取码: 9qa6

打包

基于我上面的项目，实现之后,如果我们要打包为安卓软件，那么我们需要先对vue项目进行打包

我的项目是用的vue创建的，非webpack，那么默认给我创建了一个vue.config.js文件,内容如下:

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
})

这个是它的初始内容，因为我们的项目只有纯vue，没有和后端交互，因此我们需要加一句配置即可

  publicPath: './'

最终代码是

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  publicPath: './'
})

然后执行我们的打包指令

npm run build

打包完会给你一个提示:

这样我们就打包好了，然后找到我们项目的dist文件夹

需要注意的时候，打包我们打包后的文件不能含有中文名称的文件,如我的这个

下载HbuildX

我们这里使用hbuildx进行安卓打包

HbuildX官网

点击 Download for Windows

然后会获得一个软件的压缩包，解压打开可执行exe文件

打开之后进入主界面是这样的

然后点击左下角进行登录

第一次登录，它会跳转到开发者登录中心

HbuildX开发者登录中心

注意，好像至少需要绑定手机号才能往在后面我要打包的时候进行打到包

使用HbuildX

我们点击文件->新建->项目

然后选择5+App
填写项目名称,如我项目名:singleEditor
选择需要构建项目的路径
选择默认模板
选择创建即可

创建完项目结构如下

然后把打包好的vue文件复制到创建好的项目下面,复制后项目结构如下

接着找到manifest.json文件，这个是进行打包安卓的配置

首先点开这个文件，找到基础配置那一项,我们需要注意这些配置
应用标识（AppID）： 一般你登录会自动生成
应用名称: 根据自己项目填名字
应用版本:初始1.0，后续假如有更新内容，并且用起来，可以后面往上加，如
1.1 或1.2，或2.0
应用入口: 默认index.html，不用动

往下选择图标配置
网上找一个图标，可以用阿里云的图标库找一个
阿里云图标矢量库
然后把找到的图标放到自动生成图标栏位上

点击按钮自动生成所有图标并替换
它会生成一个unpackage文件夹，会自动生成适配不同手机的大小的图标

然后点击发行->原生App-云打包

然后勾选Android(apk包)
选择使用公共测试证书
选择打正式包

至于下面的广告，你可以根据自己的需要选择是否勾选，如我要给我朋友，那我是取消勾选的

PS: 2024.09.02更新: 发现它广告突然默认有几个是勾选的，如果需要取消广告，进入这个链接进行登录你在HBuildX注册的账号
HBuildX广告配置
进去，在打包完之后选择关闭广告
点击广告设置,然后会看到你打包的项目,点击你要关闭广告的应用详情

然后将里面涉及开启的广告配置给关闭，一般等个几分钟就会生效配置

这个时候我们点击右下角的打包
它会提示你打包完成安装的时候会报存在安全隐患,因为我们只是用来测试玩。如果有兴趣打包真正可上应用商店的，请根据提示调整配置(PS:博主没有试过)
然后选择继续打包

选择打包之后，我们可以在控制台看到具体打包的情况
他会提示我们打包之后的文件在什么位置

找到提示路径复制出来改个名字发给你朋友，安装看看吧

结语

以上就是我用vue项目打包为安卓软件的全过程了，赶紧试试吧

本文标签： 项目软件Vue

版权声明：本文标题：将vue项目打包为安卓软件 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.betaflare.com/biancheng/1726734270a1156606.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。