将vue打包为APP重要步骤和流程

一、大致流程
1.项目整体使用Vue+HbuilderX(或者Hbuilder)开发
2.使用Vue来实现基本页面跳转，增删改查等app基本功能，
3.当需要使用到app原生功能则使用 mui.js
4.真机调试
5. 最后通过HbuilderX将vue项目打包成app包

//题外话
如果你会vue,且你的web站是适合手机屏幕的
那么你完全可以考虑一下uni-app
因为使用uni-app编写的一套代码可以运行到多个平台
vue h5转换uni-app指南
二、注意事项

1.router里的mode注解掉

const router = new VueRouter({//mode: 'history',   //设置history是为了去掉默认的#锚点，但我们需要#锚点，否则跳转路径时会出现问题base: process.env.BASE_URL,  routes
})

2.将publicPath修改为"./" （这里是指vue cli3,4版本）

在vue项目下创建vue.config.js文件
（老版本则修改目录下config文件内index.js中assetsPublicPath修改为 assetsPublicPath: ‘./’）

module.exports = {//下面的process.env.NODE_ENV 可以判断当前环境是开发环境还是生产环境publicPath: process.env.NODE_ENV === 'production'? './'    //这里要填 './'或者''(空),默认为'/',这里设置的会被应用到index.html里css,js路径的前面: '/',   //这里是开发环境,通常没有项目名outputDir:'dist',   //当运行 build 时生成的生产环境构建文件的目录assetsDir:'',  //放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录
}

三、将应用打包

1.按照上面的步骤修改以后,
就可以使用npm将vue打包为静态文件了

npm run build

2.用HbuilderX生成mainfest.json包
(如果使用的是Hbuilder,导入项目,右键直接转移动APP就可以了)
打开HbuilderX新建项目选5+App类型,新建完成之后，删除项目中除mainfest.json以外的所有文件，将vue项目打包后的文件打包过来

3.安卓证书
Android平台签名证书(.keystore)生成指南
安卓证书在线制作工具

关于Android证书的用途
证书是一个开发者的身份标志，对Android系统而言。使用一个证书签发的App，是属于同一个开发者的App。
举个极端的例子，如果你的应用证书泄露，那么别人可以用这个证书签名一个仿冒App，假如包名和你的包名也一样，就可以覆盖安装安卓手机上你之前的包。
当前仅依赖证书校验是不完善的，所以主流的Android应用市场，通过实名认证开发者信息和著作权，强化了App的唯一性。也就是从主流应用市场点更新，不会发生冒充事件。但是通过其他方式安装apk，仍然会发生冒充的可能性。
如果签名不同，即使包名相同，也无法覆盖安装。此时安卓手机会在安装时报错，需要先卸载老的版本，才能安装新版。

四、mui.js (GitHub)
要使用到app原生功能则使用mui.js
1.导入

1、安装cnpm i mint-ui -S
2、安装后导入文件：
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
=====================\\\\\\\\
3.或直接在index.html里引入
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/mint-ui/lib/index.js"></script>

2.简单使用
Vue单页面应用打包app处理返回按钮

将vue打包为APP重要步骤和流程相关推荐

Hbuildx 使用vue打包的App实现微信支付功能
很多兄弟在做App微信支付的时候出现报错,code:62000? code:-1? code:-100? 那是你没看本博主的文章! 前言: 本文章使用的是vue+h5+plus技术,结合hbuildx ...
Hbuildx 使用vue打包的App实现微信分享功能
前言: 本文章使用的是vue+h5+plus技术,结合hbuildx打包的App,实现在App中分享页面到朋友圈以及好友. 下面贴码介绍: <nut-popup v-model="is ...
使用vue打包的App如何检测版本更新？
前言: 本文章使用的是vue+h5+plus技术,结合hbuildx打包的App,实现在App中检测版本更新功能. 下面贴码介绍: getVersion() {zmitiUtil.Ajax('user ...
vue打包的app如何设置自动清理软件缓存_使用Webpack启动你的Vue.js应用
Webpack是开发Vue.js单页面应用(SPA)最基本的工具.通过管理负责的构建步骤能够使开发工作流非常的简单,同时也能够优化应用的大小提升应用的性能. 在这篇文章我将为大家展示Webpack是如 ...
vue打包为App手摸手教你
Good things come to those who wait. 耐心等待,终有回报. 一.在根目录新建一个vue.config.vue文件,如下图二.你弄好了吗?.. 三.在终端运行npm ...
HBuilder将Vue打包成App遇到的问题以及解决方案
2019独角兽企业重金招聘Python工程师标准>>> 1.[ERROR] : 没有对应的路由页面解决:将路由的mode改为hash(由history改为hash) mode: ' ...
vue打包成app后，背景图片不显示
问题: 在使用npm run build 打包后, 如果在页面中使用img标签引入,打包后的路径是由index.html开始访问的,真正访问的是Static/img/图片名, 是正确的, 但是写在cs ...
vue打包成app自动更新‘plus‘ is not defined报错
有人知道因为什么嘛?
Vue HBuilder打包为app流程
vue 打包为app 记录以下自己将web app打包成移动端app的步骤及问题事先准备,开发完成的web app项目(也可以利用vue-cli脚手架构建vue模板项目),npm run dev可以 ...

将vue打包为APP重要步骤和流程

将vue打包为APP重要步骤和流程相关推荐

最新文章

热门文章