将vue项目打包成移动端app(app打包教程)

Vue项目打包成移动端APP需要准备的工具:Hbuilder目录Vue项目打包成移动端APP首先打包vue到dist目录然后再Hbuilder中打开dist目录然后将dist包含的web项目转换为移动APP项目前几步配置完成后,就可以在手机上进行真机调试了真机测试没有问题,就可以进行下一步—》打包apk了最后将apk安装包安装到手机上就可以正常使用了…

大家好,又见面了,我是你们的朋友全栈君。

Vue项目打包成移动端APP

需要准备的工具:Hbuilder

目录

Vue项目打包成移动端APP

首先打包vue到dist目录

然后再Hbuilder中打开dist目录

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

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

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

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


首先打包vue到dist目录

npm run build

将vue项目打包成移动端app(app打包教程)

然后再Hbuilder中打开dist目录

将vue项目打包成移动端app(app打包教程)

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

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

将vue项目打包成移动端app(app打包教程)

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

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

应用信息配置

appid需要登录后才能获取

将vue项目打包成移动端app(app打包教程)

图标配置

将vue项目打包成移动端app(app打包教程)

启动图片

将vue项目打包成移动端app(app打包教程)

SDK配置

将vue项目打包成移动端app(app打包教程)

模块权限配置

将vue项目打包成移动端app(app打包教程)

页面引用关系

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

将vue项目打包成移动端app(app打包教程)

代码视图

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

将vue项目打包成移动端app(app打包教程)

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

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

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

将vue项目打包成移动端app(app打包教程)

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

将vue项目打包成移动端app(app打包教程)

将vue项目打包成移动端app(app打包教程)将vue项目打包成移动端app(app打包教程)将vue项目打包成移动端app(app打包教程)

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

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

将vue项目打包成移动端app(app打包教程)

将vue项目打包成移动端app(app打包教程)

将vue项目打包成移动端app(app打包教程)

将vue项目打包成移动端app(app打包教程)

最后将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

 

 

 

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/127696.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • Java开发手册之注释规约「建议收藏」

    Java开发手册之注释规约「建议收藏」Java开发手册之注释规约

  • Web前端和Web后端的区分「建议收藏」

    一、绪论1、前台:呈现给用户的视觉和基本的操作。后台:用户浏览网页时,我们看不见的后台数据跑动。后台包括前端、后端。前端:对应我们写的html、css、javascript等网页语言作用在前端网页。后端:对应jsp、javaBean、dao层、action层和service层的业务逻辑代码。(包括数据库)为什么jsp是后端呢?主要是jsp的运行原理是在tomcat服务器运…

  • pycharm导入anaconda_pip怎么用镜像更新

    pycharm导入anaconda_pip怎么用镜像更新win10设置pip源在下面目录下创建pip文件夹:C:\Users\你的用户名\AppData\Roaming\pip(注意:AppData可能是隐藏文件)进入pip文件夹,新建pip.txt文件输入如下:[global]timeout=6000index-url=http://pypi.douban.com/simpletrusted-host=pypi.douban.com重命名为pip.ini,完成!!附带一些其他源:阿里云http://mi

  • php layer弹出层更改背景,详解Layer弹出层样式[通俗易懂]

    php layer弹出层更改背景,详解Layer弹出层样式[通俗易懂]前言:学习layer弹出框,之前项目是用bootstrap模态框,后来改用layer弹出框,在文章的后面,我会分享项目的一些代码(我自己写的)。layer至今仍作为layui的代表作,她的受众广泛并非偶然,而是这五年多的坚持,不断完善和维护、不断建设和提升社区服务,使得猿们纷纷自发传播,乃至于成为今天的Layui最强劲的源动力。目前,layer已成为国内最多人使用的web弹层组件,GitHub自然…

  • lineNumber: 6; columnNumber: 40; 文档根元素 “mapper” 必须匹配 DOCTYPE 根 “configuration”。

    lineNumber: 6; columnNumber: 40; 文档根元素 “mapper” 必须匹配 DOCTYPE 根 “configuration”。运行mybatis时报错:lineNumber: 6; columnNumber: 40; 文档根元素 “mapper” 必须匹配 DOCTYPE 根 “configuration”。Cause: org.apache.ibatis.builder.BuilderException: Error parsing SQL Mapper Configuration. Cause: org.a…

  • google的ipv6地址_Google礼品卡

    google的ipv6地址_Google礼品卡#GooglePlus2a00:1450:8007::64plus.google.com2404:6800:8005::62talkgadget.google.com##Google.comGoogle.com2404:6800:8005::68www.google.com#主页2404:6800:8005::c1m.google.com#Google移动版2404:6…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号