将vue项目打包为安卓软件

news2024/11/24 12:11:54

前言

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

点击跳转到:纯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，不用动

在这里插入图片描述