vue移动端项目打包成app

这几天我做了一个vue移动端的小项目就想着打包成 app安装在手机上看看

我就讲解下整个思路和过程

首先项目开发完之后（我使用的是vue-cli 3.*版本）

在项目文件夹下创建一个 vue.config.js

module.exports = {

publicPath: "./", // 打包配置这个可以先本地查看下效果

productionSourceMap: false // 调试文件的功能关闭能加快打包

};

运行命令行 npm run build

项目文件夹下生成一个 dist文件夹下面有这些文件然后打开index.html 本地预览可以

然后打开huilderX 创建一个 5+App项目

创建完成之后打开文件目录

把你vue项目打包的文件把这里的相同的文件覆盖掉

主要是 css img js 文件夹和index.html文件

完成之后

进入项目打开manifest.json 文件进行基础的配置包括版本名称图标 sdk等配置

进入hBuilderX 右击项目->发行->原生app云打包

如有有自己的开发id就用自己的没有就用dcloud的公有证书

点击打包等到打包完成他会返回一个app的下载地址你下载下来

是一个apk文件然后传到手机上就可以点击安装了

安装完之后测试可以表示打包成功了

本人也是前端小白期待大佬的指点自己一个人摸搜也是走了不少弯路

vue移动端项目打包成app相关推荐

vue移动端项目怎么生成apk_将Vue移动端项目打包成手机app---HBuilder
将移动端页面打包成app 1.使用 HBuilder 直接编译打包点击左上角文件>打开目录>选择目录选择用Webpack打包好的dist文件目录由于我添加到项目了,所以会显示该项 ...
vue PC端项目打包成windows桌面程序
一.npm run build 生成dist文件注意:打包dist文件需要将绝对路径"/"改为相对路径"./" 二.把electron的官方例子扒下来,简称项 ...
vue前后端分离项目打包成app,部署成移动端
将vue项目打包成app,在手机上运行. 1. vue打包 npm run build 先将vue的前端项目打包成dist文件夹 2. 安装hbuilderX Hbuilder官网地址 3. hbui ...
vue项目打包成app，在ios端iconfont 部分字体图标不显示
最近在用vue结合capacitor 写app的项目,痛苦真痛苦. 在xcode上打包成app之后,发现有些字体图片怎么改都显示不出来. 解决办法: 把引用的css url 加上https
html5打包成app不能拍照,vue项目打包成app无法使用input调用相机
问题描述:打包成app后使用input上传图片只能做到在文件夹中选取,不能实现拍照上传图片解决方案: 1.利用HTML5 Plus的Camera调用相机 2.利用HTML5 Plus的IO来实现读取 ...
将Html网页或者是Aue项目打包成App
把前端的网页打包成App 一. 前言首先,在学前端的时候,我们接触到了Html,css,js,你只需要有这些,即可打包成一个App,当然肯定需要一些打包的软件,然后你如果学习到了Vue框架,用脚 ...
VUE CLI 4.x 打包成APP后白屏解决办法打包APP教程
一般用VUE打包项目后,再把项目打包成APK安装包,在手机上打开应用我们会发现打开是一片白,这是什么原因呢? 路由模式为history模式. 资源的路径不对.默认情况下,Vue CLI 会假设你的应用 ...
vue的移动端项目打包成手机的app软件apk格式
目录前提准备: 1.vue项目npm run build打包成dist文件夹 2.注册hbuilderx账号,获取appid 步骤一.创建h5+app空模版二. 将打包完成生成dist文件目录复 ...
React的移动端项目打包成手机的app软件apk格式
前提准备: 1.React项目npm run build打包打包前配置在项目打包之前需要在package.json文件中添加 "homepage": "./" ...

vue移动端项目打包成app

vue移动端项目打包成app相关推荐

最新文章

热门文章