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使用：

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,viewport-fit=cover">

<---------------------------------------------------------------分割線-------------------------------------------------------------------------------->

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

到這裡就結束了，祝大家武運昌盛。哈哈哈