PWA Vue JS 应用程序未显示在设备上答案

【问题标题】：PWA Vue JS App doesn't displayed on devicesPWA Vue JS 应用程序未显示在设备上
【发布时间】：2019-12-09 04:37:46
【问题描述】：

我尝试在设备上运行我的 PWA 应用，但遇到了一些问题。

在 Android 智能手机上（荣誉）：适用于谷歌浏览器，并在将应用添加到主屏幕后。

在 Android 平板电脑（三星）上：适用于谷歌 Chrome，但将应用添加到主屏幕后会出现白屏。

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

在 IOS Ipad 上：Safari 上的白屏。出现此错误：“SyntaxError: Unexpected token '...'. Expected a property name.”

这是我的 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: '/',
    },
  ],

有人有同样的问题吗？

【问题讨论】：

Unexpected token '...' 通常意味着您正在使用浏览器不支持的 JavaScript 功能。您可能需要使用 babel 或类似工具来转译某些功能。

标签： android ios google-chrome vue.js progressive-web-apps

【解决方案1】：

Abraham 是正确的，带有 ... 的错误几乎可以肯定是浏览器不支持 ES6。

这取决于您如何构建应用程序，以及如何解决问题。

如果您使用的是 Vue CLI，请see my answer here 回答类似问题。

例如

vue.config.js

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

对于 webpack，直接使用类似：

build: {
    transpile: ['yourES6package']
}

可能还有其他解决方案，例如在 ES5 中使用早期版本的 npm 包。

【讨论】：