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

Question

我希望官方的 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 -应用程序启动器信息对话框

成功加载网站

在 Chrome 开发人员工具的 Application 选项卡中，在 Service Workers 部分，我单击 Offline 复选框。

编辑：这个截图有点过时了。我知道 chrome 需要 https，除非它在 ​​localhost 上运行。我可以确认我在本地托管我的网站：http://localhost:8887/

刷新浏览器

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

Uncaught SyntaxError: Unexpected token '<' Manifest: Line: 1, column: 1, 语法错误。

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

更奇怪的是......在清除存储并刷新页面之后。它工作一次（在线模式）但再次刷新（在线模式）仍然会产生错误！

标签： javascriptvue.jsprogressive-web-apps

Answer 1

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