vue 插件 pwa sw.js 未找到

Question

我有 1 个应用程序使用 vue pwa 插件，效果很好。

该应用的 vuejs 配置如下所示：

const WebpackNotifierPlugin = require('webpack-notifier')

module.exports = {
  lintOnSave: false,
  css: {
    loaderOptions: {
      sass: {
        implementation: require('sass')
      }
    }
  },
  transpileDependencies: [
    'vuex-module-decorators',
    'vuex-persist'
  ],
  pwa: {
    name: 'MyApp',
    themeColor: '#000000',
    msTileColor: '#000000',
    appleMobileWebAppCapable: 'yes',
    appleMobileWebAppStatusBarStyle: 'black',

    // configure the workbox plugin
    workboxPluginMode: 'InjectManifest',
    workboxOptions: {
      // swSrc is required in InjectManifest mode.
      swSrc: 'dev/sw.js',
      // ...other Workbox options...
    }
  },
  configureWebpack: {
    devServer:{
      historyApiFallback: true,
    },
    plugins: [
      new WebpackNotifierPlugin(),
    ],
    optimization: {
      runtimeChunk: 'single',
      splitChunks: {
        chunks: 'all',
        maxInitialRequests: 3,
        minSize: 0,
        cacheGroups: {
          vendor: {
            test: /[\/]node_modules[\/]/,
            name(module) {
              const packageName = module.context.match(/[\/]node_modules[\/](.*?)([\/]|$)/)[1];
              return `npm.${packageName.replace('@', '')}`;
            },
          },
        },
      },
    },
  },
}

我有另一个应用程序，完全一样，vue2、beufy 等等。我通过 vue pwa 插件安装了相同的东西，配置看起来完全一样，但是当我运行构建时它说找不到 sw.js 文件：

Error: ENOENT: no such file or directory, open 'dev/sw.js'

我创建了一个超级基本的 vue 应用程序，它在这里做同样的事情：https://github.com/johndcarmichael/vue-pwa-sw-not-found

有没有其他人遇到过这个问题，你是如何解决的？

Answer 1

您的项目中没有 dev/sw.js，正如您在 swSrc 中设置的那样。 InjectManifest 表示获取此 sw.js 源文件并将预缓存清单写入其中，生成最终的 service-worker.js 文件。

vue 插件 pwa sw.js 未找到

vue plugin pwa sw.js not found

vue.js

progressive-web-apps

vue-cli