使用HBuilderX将Vue项目打包为移动端APP

2020-04-27 本文已影响0人瑟闻风倾

1. 创建Vue项目并测试可正常运行

创建：可使用vue脚手架工具vue-cli创建vue项目，并安装依赖
测试：输入启动命令npm run dev，测试项目是否能正常启动

2. 项目打包

使用npm run build打包命令生成dist文件夹

在vue打包成dist文件前，需修改config目录下的index.js配置文件，将打包文件的资源文件路径更改为当前目录下的绝对路径，否则将导致打包的app在真机运行时出现界面白屏的问题。

解决项目文件路径引用错误导致文件加载为404(界面白屏)的问题.png

3. 使用HBuilderX新建5+App项目

菜单栏->文件->新建->项目

新建5+App项目.png

4. 将vue项目整合到新建的5+App项目

将dist文件夹下的static文件夹和index.html文件复制到新建的5+App项目。

static文件夹和index.html文件.png

5. 在manifest.json中配置移动APP所需的配置项

基础配置（应用名称、版本号、页面入口、应用描述等）
图标配置
启动图配置
SDK配置
模块权限配置
App常用其他设置等

配置项.png

6. 云打包生成app

菜单栏->发行->原生app原打包->使用公用测试证书->打包，最后将apk安装包安装到手机上就可以正常使用了。

云打包.png

拓展：当然在HBuilderX中也可以采用更简单的方式来将Vue项目打包为手机APP，并且所有的网站都可以采用这种方式打包为APP。如： ① 在uniapp项目中使用 web 浏览器组件web-view（web-view作为用来承载网页的容器，会自动铺满整个页面）②在5+App项目中直接把域名放进去，APP只做页面跳转。

uniapp项目：使用web-view组件承载网页

<template>
    <view>
        <web-view :src="url" @message="getMessage"></web-view>
    </view>
</template>

<script>
var wv;//计划创建的webview
export default {
    data() {
        return {
            url: 'https://www.jianshu.com/u/4da122c54fa1'
        }
    },
    onLoad() {
        
    },
    onReady() {
        
    },
    methods: {
        getMessage(event) {
            uni.showModal({
                content: JSON.stringify(event.detail),
                showCancel: false
            });
        }
    }
}
</script>

<style>

</style>

5+App项目：页面跳转

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title></title>
    <script type="text/javascript">
        
        document.addEventListener('plusready', function(){
            //console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。"
            window.location.href = "https://www.jianshu.com/u/4da122c54fa1"
        });
        
    </script>
</head>
<body>
    
</body>
</html>