Vue项目如何打包成移动端APP

 更新时间:2023年12月19日 12:25:30   作者:百里狂生  
这篇文章主要介绍了Vue项目如何打包成移动端APP,本文通过图文示例相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧

Vue项目打包成移动端APP

需要准备的工具:Hbuilder

首先打包vue到dist目录

npm run build

然后再Hbuilder中打开dist目录

首先可以看到dist目录的图片是一个 W 字样的图标,表示这是一个 web项目

然后将dist包含的 web项目 转换为 移动 APP项目

 此时可以看到dist目录的文件图标由 W 变成了 A,说明此时的web项目已经变成了移动APP项目 ,而且此时生成了一个新的文件manifest.json

下面要做的就是在manifest.json中配置移动APP所需要的配置项

应用信息配置

appid需要登录后才能获取

图标配置

启动图片

SDK配置

模块权限配置

页面引用关系

页面引用关系分析并不是完全正确的,对于未被检测到文件需要手动添加到打包项目中去

代码视图

此视图中会显示所有的配置信息

前几步配置完成后,就可以在手机上进行真机调试了

首先使用usb数据线连接自己的手机,然后将手机设置为开发者模式中的USB调试模式

接下来就是启动Hbuilder真机调试了

连接后,会在手机上自动安装一个HbuilderAPP,用于真机调试

真机测试没有问题,就可以进行下一步---》打包apk了

菜单栏点击【发行】【云打包-打原生安装包】

最后将apk安装包安装到手机上就可以正常使用了

Vue打包成.apk安装的过程中遇到的问题

问题1:打包成的apk在真机上显示空白界面

原因:项目文件路径引用错误,导致文件加载为404

vue打包后的文件时存在于dist目录下的,也就是说dist目录作为根目录。

在dist目录中启动一个本地服务其访问地址为http://localhost:8080/index.html,即可访问首页dist目录下的index.html文件并加载对应的js,css文件,也就是说文件启动根目录是和dist目录中的index.html是平级的。

- dist
-- css
-- img
-- js
-- index.html
-- 启动的根目录

而打包成apk文件后在真机上测试,其访问的地址为http://localhost:8080/dist/index.html,多了一层dist,导致页面空白,加载的文件为404找不到,也就是说打包后的启动目录的根目录是个dist平级的不是和dist目录中的index.html平级。

- dist
-- css
-- img
-- js
-- index.html
- 启动的根目录

 解决方法:

在vue打包成dist文件前,修改vue.config.js配置文件,将打包文件的资源文件更改为当前目录下的绝对路径

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

问题2:首屏展示后,路由无法跳转,点击无效

原因:文件动态加载的资源地址404找不到

因为动态加载的资源地址为http://localhost:8080/css/xxx.css和http://localhost:8080/js/xxx.js,而实际上文件的资源路径是http://localhost:8080/dist/css/xxx.css和http://localhost:8080/dist/js/xxx.js说加载动态加载的资源均为404

解决方法:

更改vue项目中的路由模型配置:将H5的历史记录模式改为hash模式

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter({
    // mode: 'history',
    mode: 'hash'
})
export default router

到此这篇关于Vue项目打包成移动端APP的文章就介绍到这了,更多相关vue打包成app内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue router返回到指定的路由的场景分析

    vue router返回到指定的路由的场景分析

    这篇文章主要介绍了vue router返回到指定的路由的场景分析,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-11-11
  • 分享vue里swiper的一些坑

    分享vue里swiper的一些坑

    这篇文章主要介绍了vue里swiper的一些坑及swiper在vue中的使用,本文分步骤给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-08-08
  • vue 实现类似淘宝星级评分的示例

    vue 实现类似淘宝星级评分的示例

    下面小编就为大家分享一篇vue 实现类似淘宝星级评分的示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • 亲自动手实现vue日历控件

    亲自动手实现vue日历控件

    这篇文章主要记录了亲自动手实现vue日历控件的详细过程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-06-06
  • 解决Vue3.0刷新页面警告[Vue Router warn]:No match found for location with path /xxx

    解决Vue3.0刷新页面警告[Vue Router warn]:No match 

    这篇文章主要介绍了解决Vue3.0刷新页面警告[Vue Router warn]:No match found for location with path /xxx问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • vue keepAlive缓存清除问题案例详解

    vue keepAlive缓存清除问题案例详解

    这篇文章主要介绍了vue keepAlive缓存清除问题案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
    2021-09-09
  • Vue实现简单网页计算器

    Vue实现简单网页计算器

    这篇文章主要为大家详细介绍了Vue实现简单网页计算器,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • 使用vuetify实现全局v-alert消息通知的方法

    使用vuetify实现全局v-alert消息通知的方法

    使用强大的Vuetify开发前端页面,结果发现官方没有提供简便的全局消息通知组件,所以自己动手写了一个简单的组件,接下来通过本文给大家介绍使用vuetify实现全局v-alert消息通知的详细代码,感兴趣的朋友跟随小编一起看看吧
    2024-02-02
  • 在Vue3项目中使用VueCropper裁剪组件实现裁剪及预览效果

    在Vue3项目中使用VueCropper裁剪组件实现裁剪及预览效果

    这篇文章主要介绍了在Vue3项目中使用VueCropper裁剪组件(裁剪及预览效果),本文分步骤结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-07-07
  • 基于Vue方法实现简单计时器

    基于Vue方法实现简单计时器

    这篇文章主要为大家详细介绍了基于Vue方法实现简单计时器,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08

最新评论