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 文件。