Question

我使用了register-service-worker，所以registerServiceWorker样板保持不变。

/* eslint-disable no-console */

import { register } from 'register-service-worker';

if (process.env.NODE_ENV === 'production') {
  register(`${process.env.BASE_URL}service-worker.js`, {
    ready() {
      console.log(
        'App is being served from cache by a service worker.\n'
      );
    },
    registered() {
      console.log('Service worker has been registered.');
    },
    cached() {
      console.log('Content has been cached for offline use.');
    },
    updatefound() {
      console.log('New content is downloading.');
    },
    updated() {
      console.log('New content is available; please refresh.');
    },
    offline() {
      console.log('No internet connection found. App is running in offline mode.');
    },
    error(error) {
      console.error('Error during service worker registration:', error);
    },
  });
}

因此尝试yarn build进行生产。全是绿色。但是一旦我部署/本地主机，这个错误就会出现

Cannot use import statement outside a module在service-worker.js

正如我所想的那样，可以在脚本下添加<type="module">。但这在vue-project中这样做是不切实际的，有任何解决建议吗？这是我在vue.config.js

中用于pwa的配置

// vue.config.js
pwa: {
    manifestOptions: {
      background_color: '#f2f2f2',
      purpose: 'maskable any',
    },
    // configure the workbox plugin
    workboxPluginMode: 'InjectManifest',
    workboxOptions: {
      // swSrc is required in InjectManifest mode.
      swSrc: 'src/registerServiceWorker.js',
      swDest: 'service-worker.js',
    },
  },

Answer 1

好吧...问题是错误消息所显示的内容：不允许您在Service Worker脚本（'service-worker.js'）中使用import语句。

也许您将import与importScripts混淆了？后者是您应该在Service Worker中使用的。请将您的service-worker.js添加到您的问题中以获取更多说明=）

registerServiceWorker [ERROR]无法在模块外部使用import语句

1 个答案: