过程
本人,是一个比较懒,
不喜欢学习原生开发,所以入局了HTML5+
不喜欢放肆复制粘贴,所以入局了Vuejs
在论坛寻找了很久,也google了很久,一直没有一个Vue-cli构建SPA开发HTML5+应用的完美例子。
论坛里面有一个vue-cli template for Hbuilder的例子,但是编译完成之后,生成的文件并不能使得基座页面刷新,需要手动重启基座才能看到最新的效果
论坛中也有人提到,在mainfast.json文件中将入口文件设置为[your own id]:8080,但是没有具体的步骤,经过一番探索,已经成功掌握了这一方式
在论坛的解决方案 【2】 中,能够直接使用官方的 webpcak 模板,并且保证了热更新能够正常使用,也能够掉起HTML5+的API,下面将具体步骤贴出,用以方便论坛中有需要的人
结果
如果想要使用vue-cli构建基于Vue的SPA程序,并且能够在真机调试的时候能够顺利的调用HTML5+的接口,而且要能够通过Chrome远程调试的话,那么您的照着下面的步骤慢慢来
修改Vue-cli的webpack配置
1、 修改 config/index.js
{
build:{
assetsPublicPath:'./'
}
}
打包前修改html里面静态资源的路径,代码中网络资源一定要加上https、http
修改src/main.js文件
//为每个组件都混入一个plusready的状态标识,方便在组件中安全的调用plus接口,如果你想在组件中安全的调用puls接口也可以用混入方法拓展Vue对象原型,将plus注入到Vue对象的原型链上去
Vue.mixin({
computed: {
plusReady() {
return this.$store.state.isplusReady;
}
}
})
// 配置html plus 环境
document.addEventListener('plusready', function () {
// 设置一个全局plusready状态
store.state.isplusReady = true;
// 监听返回按键
let now = false;
let time = null;
plus.key.addEventListener('backbutton', function () {
// 如果是首页则执行退出操作
if (app.$route.path === "/home" || app.$route.path === "/my-center") {
time = null;
if (now) {
now = false;
plus.runtime.quit();
} else {
now = true;
plus.nativeUI.toast("再按一次退出", { duration: 'short' });
time = setTimeout(() => {
now = false;
}, 1000);
}
// 如果是内页则执行路由返回操作
} else {
router.go(-1);
}
})
})
app项目配置
新建一个app项目
开发时修改入口为http://[your own ip]:8080(例:http://192.168.0.1:8080)
打包后,将dist文件夹中所有文件复制到app根目录,入口文件设置为index.html,检查index.html中没有绝对路径,源代码中网络资源文件已经添加http、https协议头
到此结束
如有更加新奇的想法请跟帖讨论,