javascript - vue-cli 使用官方 pwa 插件创建的网站无法在离线模式下工作

标签 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/

刷新浏览器

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

未捕获的语法错误:意外的标记“<” list :行:1,列:1,语法错误。

enter image description here

我对 vue-cli pwa 插件的期望是错误的吗?我的印象是默认设置就可以工作。

更奇怪的是……在清除存储并刷新页面之后。运行一次(在线模式)但再次刷新(在线模式)仍然会产生错误!

enter image description here

最佳答案

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

关于javascript - vue-cli 使用官方 pwa 插件创建的网站无法在离线模式下工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58907415/

相关文章:

javascript - 使用 lodash 映射复杂的 JSON

javascript - 帮助我正在开发的 Javascript 程序

vue.js - 如何在Vue中将颜色作为 Prop 发送?

javascript - 渐进式网络应用程序 OCR SDK (JavaScript)

c# - Aspx 是否支持 PWA

javascript - 如何删除图像按钮周围的输入字段?

javascript - 使用已定义选项进行选择的 ng-model

javascript - 使用 array.filter 在 Vue 应用程序中过滤控制 v-for 的数组使用相等但不是 RegExp

javascript - 在 Vue.js 中,当按下回车键时,向文本输出添加一个 <br> 标签

javascript - 如何从 Spring Boot 正确提供 service-worker.js 服务?