vue-cli 3.0打包webapp的坑

**本文主要讲解webapp打包流程，沉浸模式更改，双击后退退出app，vue-cli3.0打包开启app白屏问题
如果你没有这些问题
读到这里就可以退出了**

1.打包流程
编译dist文件后在hubilder里把它转换为app项目，云打包

或者使用HBuilderX创建第一个webapp项目 H5+app ( 推荐！！ )
将dist文件夹里的文件复制过去

unpackage是配置app图片自动生成的

在代码视图里添加这句：

"statusbar": {
            "immersed": true
        },

变为‘沉浸模式’
Q：什么是沉浸模式呢？
A：简单来说就是手机的状态栏为透明的你的app页面和手机顶部连接

ios使用：

<---------------------------------------------------------------分割线-------------------------------------------------------------------------------->

2.双击退出退出app
在utils里新建一个app-back.js文件(文件名随意)


app-back.js内容如下：

/**
 * 解决hbuilder打包app之后点击手机返回键直接退出app的
 */
document.addEventListener('plusready', function () {
    var webview = plus.webview.currentWebview()
    plus.key.addEventListener('backbutton', function () {
        webview.canBack(function (e) {
            if (e.canBack) {
                webview.back()
            } else {
                // webview.close() //hide,quit
                // plus.runtime.quit()
                // 首页返回键处理
                // 处理逻辑：1秒内，连续两次按返回键，则退出应用；
                var first = null
                plus.key.addEventListener(
                    'backbutton',
                    function () {
                        // 首次按键，提示‘再按一次退出应用’
                        if (!first) {
                            first = new Date().getTime()
                            console.log('再按一次退出应用') // 此处可以用自定义提示
                            setTimeout(function () {
                                first = null
                            }, 1000)
                        } else {
                            if (new Date().getTime() - first < 1500) {
                                plus.runtime.quit()
                            }
                        }
                    },
                    false
                )
            }
        })
    })
})

main.js 里引入：

import './utils/app-back.js';

<---------------------------------------------------------------分割线-------------------------------------------------------------------------------->

3.vue-cli 3.0 打包app 白屏
（1）修改公共路径，这里涉及对全局的配置问题，但是vue-cli3.0已经找不到2.0的文件夹。
这时在根目录下创建一个vue.config.js文件：

module.exports = {
    publicPath:'./',
}

你也可以在vue ui

！！！注意这里配置会直接修改config里的数据，还会产生很多undefined的值，所以不推荐。
更多配置信息参考：https://cli.vuejs.org/config/#global-cli-config
（2）.上述方法修改后还是白屏？
注意这里

vue-router不能使用history，使用hash-router

把
mode:‘histtory’
注释、删除默认使用hash-router

到这里就结束了，祝大家武运昌盛。哈哈哈