将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)
blank

相关推荐

  • 二叉树一定是完全二叉树_完全二叉树概念

    二叉树一定是完全二叉树_完全二叉树概念一、树的概念及其结构树是一种非线性的数据结构,它是由n(n>=0)个有限结点组成一个具有层次关系的集合。把它叫做树是因为它看起来像一棵倒挂的树,也就是说它是根朝上,而叶朝下的。树的特点①有一个特殊的结点,称为根结点,根节点没有前驱结点。②除根节点外,其余结点被分成M(M>0)个互不相交的集合T1、T2、……、Tm,其中每一个集合Ti(1<=i<=m)又是一棵结构与树类似的子树。每棵子树的根结点有且只有一个前驱,可以有0个或多个后继③因此,树是递归.

    2022年10月28日
  • C++使用curl发送post请求

    C++使用curl发送post请求发送post请求代码如下:#include<iostream>#include<string>#include<curl\curl.h>usingnamespacestd;//get请求和post请求数据响应函数size_treq_reply(void*ptr,size_tsize,size_tnmemb,void*stream)…

  • 怎么用python打开csv文件_Python文本处理之csv-csv文件怎么打开[通俗易懂]

    怎么用python打开csv文件_Python文本处理之csv-csv文件怎么打开[通俗易懂]csv英文全称是Comma-SeparatedValue,字面翻译逗号分隔值,是一种常见的文本格式文档,可用Excel打开,也可用常见的文本编辑器打开。csv文件经常用于在电子表格软件和纯文本之间交互数据。Python内置了csv模块,可以很方便的操作csv文件。下面介绍两种读写csv文件的方法。一、通过reader和writer函数先看一段简单的示例代码:text包含两个列表元素,首先把这两行…

  • js判断是否是字符串_js正则表达式匹配字符串

    js判断是否是字符串_js正则表达式匹配字符串js判断字符串包含某个字符串的几种方法

  • Spring IOC容器的初始化过程

    Spring IOC容器的初始化过程Spring IOC容器的初始化过程

  • cde网站_cde6150a车床

    cde网站_cde6150a车床给定一个 m x n 整数矩阵 matrix ,找出其中 最长递增路径 的长度。对于每个单元格,你可以往上,下,左,右四个方向移动。 你 不能 在 对角线 方向上移动或移动到 边界外(即不允许环绕)。示例 1:输入:matrix = [[9,9,4],[6,6,8],[2,1,1]]输出:4 解释:最长递增路径为 [1, 2, 6, 9]。示例 2:输入:matrix = [[3,4,5],[3,2,6],[2,2,1]]输出:4 解释:最长递增路径是 [3, 4, 5, 6]。注意

发表回复

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

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