Question

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

在Android智能手机（荣誉）上：与Google chrome兼容，并将应用添加到主屏幕后。

在Android平板电脑（三星）上：与Google Chrome兼容，但将应用添加到主屏幕后显示白屏。

在IOS智能手机上：Safari上出现白色屏幕。

在IOS Ipad上：Safari上的白色屏幕。出现此错误：“ SyntaxError：意外的令牌'...'。需要属性名称。”

这是我的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，请see my answer here回答类似的问题。

例如

vue.config.js

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

对于Webpack，直接使用类似的内容：

build: {
    transpile: ['yourES6package']
}

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

PWA Vue JS应用未显示在设备上

1 个答案: