javascript - Webpack DefinePlugin 没有在 ServiceWorker 中定义变量

Question

我正在使用 WebpackDefinePlugin在我的 Service Worker 中定义一个变量，就像这样

// webpack.config.js
const webpack = require("webpack");

// I tried sending a string as '"test"' with no luck aswell

plugins: [
    new webpack.DefinePlugin({
      "API_URL": process.env.VUE_APP_API_ROOT_URL
    })
]

// My Service Worker
workbox.setConfig({
   debug: false,
 });
 
 workbox.precaching.precacheAndRoute([]);
 
 workbox.routing.registerRoute(
   /\.(?:png|gif|jpg|jpeg|svg)$/,
   workbox.strategies.staleWhileRevalidate({
     cacheName: 'images',
     plugins: [
       new workbox.expiration.Plugin({
         maxEntries: 3,
         maxAgeSeconds: 1 * 24 * 60 * 60, // 1 day
       }),
     ],
   }),
 );

console.log(API_URL);
// outputs: ReferenceError: API_URL is not defined

我无法访问我的服务人员内部的环境变量，这个解决方案是否可行？

// registerServiceWorker.js

/* 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("ready")
    },
    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)
    }
  })
}

标签： javascriptvue.jswebpackservice-worker