让Vue-cli 构建SPA 搭上 HTML5+的顺风车

过程

本人，是一个比较懒，

1. 不喜欢学习原生开发，所以入局了HTML5+
2. 不喜欢放肆复制粘贴，所以入局了Vuejs

在论坛寻找了很久，也google了很久，一直没有一个Vue-cli构建SPA开发HTML5+应用的完美例子。

1. 论坛里面有一个 vue-cli template for Hbuilder的例子，但是编译完成之后，生成的文件并不能使得基座页面刷新，需要手动重启基座才能看到最新的效果
2. 论坛中也有人提到，在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:'./'  
    }  
}  

1. 打包前修改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项目配置

1. 新建一个app项目
2. 开发时修改入口为 http://[your own ip]:8080(例：http://192.168.0.1:8080)
3. 打包后，将dist文件夹中所有文件复制到app根目录，入口文件设置为index.html，检查index.html中没有绝对路径，源代码中网络资源文件已经添加http、https协议头

到此结束

如有更加新奇的想法请跟帖讨论，本帖内容不涉及基础知识，vuejs官网,HTML5+API官网