Webpack 如何根据环境变量定制我的服务人员？

编辑：这看起来像是这个的复制品。 我是将此标记为已回答，还是删除

我正在Vue CLI 3应用程序中使用workbox webpack插件的InjectManifest。我正在注入的定制服务工作者具有Firebase云消息处理（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\u APP\u FCM\u SENDER\u ID

，而不是硬编码键

---

我如何通过Web包运行我的服务人员来解决环境变量？

现在对你来说可能太晚了，但对其他人来说，我就是这样解决的。 此过程仍然使用

.env

文件作为环境相关变量。
其思想是创建一个新脚本，加载

.env

文件，该文件创建一个新文件，其中填充了

.env

文件中的变量。
在构建过程之后，我们只需在

sw.js

中导入新生成的文件即可使用

以下是步骤。
首先创建一个名为

swEnvbuild.js

的文件，该文件将是在

webpack

//swEnvBuild.js - script that is separate from webpack
require('dotenv').config(); // make sure you have '.env' file in pwd
const fs = require('fs');

fs.writeFileSync('./dist/public/swenv.js',
`
const process = {
  env: {
    VUE_APP_FCM_SENDER_ID: conf.VUE_APP_FCM_SENDER_ID
  }
}
`);

其次，我们在

sw.js

中导入从

swEnvBuild.js

生成的名为

swenv.js

的文件

// sw.js
importScripts('swenv.js'); // this file should have all the vars declared
console.log(process.env.VUE_APP_FCM_SENDER_ID);

最后，如果要使用一个命令，只需在npm脚本中添加以下内容（假设您运行的是Linux/Mac）

---

希望这能奏效。我希望有更干净的方法来做到这一点，这样我也很高兴知道其他人的解决方案是如何实现的。

我也遇到了同样的问题，关键是让webpack构建过程输出它使用的环境变量，以便将它们导入到服务人员中。这使您不必将env-var定义复制到其他预先处理您的服务人员的文件中（因为该文件在源代码管理中，所以这很混乱）

创建一个新的网页包插件

///vue config/dumpvueenvvarswebackplugin.js
const path=require（'路径'）
常量fs=require（'fs'）
const pluginName='dumpvuenvvarswebackplugin'
/**
*我们需要将服务工作者配置为缓存对API和
*静态content server，但这些是可配置的URL。我们已经使用了env变量
*vue cli提供的系统，以便在构建之外实现某些功能
*解析服务工作者文件的过程将是混乱的。这让我们
*转储为应用程序其余部分配置的环境变量，并将其导入到
*服务工作者脚本以使用它们。
*
*我们需要这样做，因为webpack不处理服务工作者脚本
*所以我们不能直接在里面放任何占位符。
*/
module.exports=类dumpvuenvvarswebackplugin{
建造师（opts）{
this.filename=opts.filename | |'env vars dump.js'
}
应用（编译器）{
const fileContent=Object.keys（process.env）
.filter（k=>k.startsWith（'VUE\u APP'））
.reduce（（累计、当前键）=>{
const val=process.env[currKey]
accum+=`const${currKey}='${val}'\n`
返回累计
}, '')
const outputDir=compiler.options.output.path
如果（！fs.existsSync（outputDir））{
//TODO理想情况下，我们会让Webpack为我们创建它，但不确定如何创建
//在生命周期的后期运行此操作
fs.mkdirSync（outputDir）
}
const fullOutputPath=path.join（outputDir，this.filename）
console.debug(
`[DumpVuenVvarsWebpackPlugin]将环境变量转储到文件=${fullOutputPath}`，
)
fs.writeFileSync（fullOutputPath，fileContent）
}
}

在vue cli配置中使用插件（

vue.config.js

或

vue config/config.default.js

如果配置被拆分为几个文件）

//导入我们的插件（更改保存插件脚本的路径）
const dumpvuenvvarswebackplugin=require（'./dumpvuenvvarswebackplugin.js'）
module.exports={
//其他东西。。。
配置网页包：{
插件：[
//我们在这里添加插件
新的DumpVuenVvarsWebpackPlugin（{filename:'my env vars.js'}）
],
},
}

在我们的service worker脚本中，我们现在可以导入我们用Webpack插件编写的文件（在构建完成后，它会在那里，并且service worker不会在开发模式下运行，所以我们应该是安全的）

importScripts（'./my env vars.js'）//由DumpvuenVvarsWebpackPlugin编写
const fcmSenderId=VUE\u APP\u FCM\u SENDER\u ID//来自上面导入的脚本
调试（`Using sender ID=${fcmSenderId}`）
//使用变量
firebase.initializeApp({
“messagingSenderId”：fcmSenderId
})

---

这并不完美，但它确实完成了任务。这是D-R-Y，因为您只需在一个点定义所有环境变量，整个应用程序使用相同的值。另外，它不处理源代码管理中的任何文件。我不喜欢插件在网页包生命周期中过早运行，因此我们必须创建

dist

dir，但希望其他比我更聪明的人能够解决这个问题。

谢谢！因为问题标记为vue-cli-3，所以我对答案进行了一些编辑，以匹配我在vue世界中为使其适用而必须做的事情。对我来说，我将package.json中的构建脚本更新为：

“build”：“vue cli服务构建和节点swEnvBuild.js”

保存了我的屁股谢谢你，我用这个片段从Package.json中提取了我的版本，并在我的服务人员中使用：）谢谢，我把它做成了一个npm包，请查看！此解决方案毫无问题，谢谢！令人难以置信的是，vue pwa的开发人员竟然没有想到这个用例。最后，这正是我想要的答案！多谢各位@Tunvir Rahman用牙刷

scripts: {
  "start": "webpack && node swEnvBuild.js"
}