小编Mad*_*ron的帖子

编辑：这看起来像此未解决问题的重复。我是否将此标记为已回答或删除？

我正在Vue CLI 3应用程序内的workbox-webpack-plugin中使用InjectManifest。我要注入的自定义服务人员已经处理了Firebase Cloud Messaging（FCM）。我需要根据我的环境（本地，暂存和生产）来侦听来自不同发件人的消息。

理想情况下，service-worker.js将如下所示：

importScripts('https://www.gstatic.com/firebasejs/4.8.1/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/4.8.1/firebase-messaging.js');

firebase.initializeApp({
    'messagingSenderId': process.env.VUE_APP_FCM_SENDER_ID
});

但是，webpack似乎未触及此代码，因为输出服务工作者仍在读取process.env.VUE_APP_FCM_SENDER_ID而不是硬编码的密钥。

如何通过webpack运行服务工作者，以解决环境变量？

我正在使用workbox-sw和workbox-webpack-plugin src sw.js文件位于根文件夹（与.env文件处于同一级别）

如何获取环境变量并将其访问到我的src sw.js文件中

这是我的 webpack.config.js

new workboxPlugin({
    globDirectory: 'dist',
    globPatterns: ['**/*.{html,js,css,svg,otf,png,jpg,gif}'],
    swSrc: './sw.js',
    swDest: path.join('public', 'sw.js')
})

每一个帮助将不胜感激！感谢大家！