HbuilderX 打包 Vue 项目为 App

一. 前提准备

1.Vue CLI 我的当前版本(4.1.2)

2.HbuilderX

二. Vue 项目打包

1.在项目根目录新建 vue.config.js, 并修改文件

添加 publicPath:’./’,如下， 这样所有的资源都会被链接为相对路径，这样打包出来的包可以部署在任意路径。 ????

module.exports = {
    publicPath:'./',
}

具体看官方文档对vue.config.js的配置： https://cli.vuejs.org/zh/config/#vue-config-js

2.打包项目

控制台执行npm run build, 生成dist文件夹，如上图所示。

npm run build

三. HbuilderX 打包 Vue 项目

1. 新建项目，项目类型选择5+App,选择模板为默认模板。

2. 打开并复制之前生成dist文件夹里内容，替换模板中文件（index.html, css, img ,js ）

可修改manifest.json文件对app进行配置 ❗️

3. 菜单选择: 发行->原生app云打包，填写相关信息,点击打包。

4. 菜单选择: 发行->原生App-查看云打包状态, 控制台输出下载地址，点击并下载apk文件 ????