由vue-cli创建的带有官方pwa插件的网站无法在离线模式下运行

时间:2019-11-18 02:53:21

标签: javascript vue.js progressive-web-apps

我希望官方的vue-cli插件可以立即在脱机模式下工作,但我无法使其正常工作。

已采取的步骤:

我使用官方的pwa插件使用@ vue / cli @ 4.0.5创建了一个项目

我正在通过首先npm run build在本地运行项目,然后使用以下方法提供文件来进行测试: 这个chrome插件 https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb?utm_source=chrome-app-launcher-info-dialog

成功加载网站

在Chrome开发人员工具的“应用程序”标签中,在“服务工作者”部分,单击“脱机”复选框。

enter image description here

编辑:此屏幕截图有些过时。我知道chrome需要https,除非它在本地主机上运行。我可以确认自己在本地托管我的网站,网址为:http://localhost:8887/

刷新浏览器

请注意浏览器控制台中的错误。

未捕获到的SyntaxError:意外令牌'<' 清单:第1行,第1列,语法错误。

enter image description here

我对vue-cli pwa插件的期望错了吗?我印象中默认设置可以正常工作。

即使是陌生人,也仍然...正在清除存储并刷新页面。它只能工作一次(在联机模式下),但再次刷新(在联机模式下)仍会产生错误!

enter image description here

1 个答案:

答案 0 :(得分:0)

使用另一种方法在本地托管我的东西可以正常工作。就我而言,我不得不使用https://www.npmjs.com/package/serve