html5项目开发拼车源码,让Vue-cli 构建SPA 搭上 HTML5+的顺风车

过程

本人，是一个比较懒，

不喜欢学习原生开发，所以入局了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协议头

到此结束

如有更加新奇的想法请跟帖讨论，