PWA Vue JS 應用程序未顯示在設備上

Question

我試圖在設備上運行我的 PWA 應用程序，但我遇到了一些問題。

在 Android 智能手機（榮譽）上：適用於谷歌瀏覽器，並在將應用程序添加到主屏幕后。

在 Android 平板電腦（三星）上：將應用程序添加到主屏幕后，可與谷歌瀏覽器配合使用，但出現白屏。

在 IOS 智能手機上：Safari 上的白屏。

在 IOS Ipad 上：Safari 上的白屏。 出現此錯誤：“SyntaxError: Unexpected token '...'. 需要一個屬性名稱。”

有我的 manifest.json ：

{
  "name": "ox-mobile",
  "short_name": "ox-mobile",
  "icons": [
    {
      "src": "./img/icons/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "./img/icons/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "index.html",
  "display": "standalone",
  "background_color": "#000000",
  "theme_color": "#4DBA87",
}

還有我的 router.ts ：

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/home',
      name: 'home',
      component: Home,
      alias: '/',
    },
    {
      path: '/',
      name: 'auth',
      component: Auth,
      alias: '/',
    },
    {
      path: '/logout',
      name: 'logout',
      component: Logout,
      alias: '/',
    },
  ],

有人有同樣的問題嗎？

Answer 1

亞伯拉罕是對的，...的錯誤幾乎肯定是不支持 ES6 的瀏覽器。

這取決於您如何構建應用程序，以及如何解決問題。

如果您使用的是 Vue CLI，請在此處查看我對類似問題的回答。

例如

vue.config.js

module.exports = {
 "transpileDependencies": [
   "yourES6package"
 ],}

對於 webpack 直接使用類似的東西：

build: {
    transpile: ['yourES6package']
}

可能還有其他解決方案，例如在 ES5 中使用較早版本的 npm 包。