21

编辑:这看起来像这个Unresolved Question的副本。我将其标记为已回答还是删除?

我在 Vue CLI 3 应用程序中使用来自 workbox-webpack-plugin 的 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_APP_FCM_SENDER_ID而不是硬编码的密钥。

如何通过 webpack 运行我的 service worker 来解析环境变量?

4

2 回答 2

19

现在对你来说可能为时已晚,但对其他人来说,这就是我继续解决这个问题的方式。此过程仍将.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
  }
}
`);

其次,我们导入从swEnvBuild.js调用swenv.js中生成的文件sw.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)。

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

希望这应该可以解决问题。我希望有更清洁的方法来做到这一点,所以我很高兴知道其他人的解决方案。

于 2019-03-14T23:14:36.140 回答
17

我遇到了同样的问题,关键是让 webpack 构建过程输出它使用的环境变量,以便可以将它们导入服务工作者。这使您不必将您的 env var 定义复制到预处理您的服务工作者的其他东西中(无论如何这只是混乱,因为该文件在源代码控制中)。

  1. 创建一个新的 Webpack 插件

    // <project-root>/vue-config/DumpVueEnvVarsWebpackPlugin.js
    const path = require('path')
    const fs = require('fs')
    
    const pluginName = 'DumpVueEnvVarsWebpackPlugin'
    
    /**
     * We to configure the service-worker to cache calls to both the API and the
     * static content server but these are configurable URLs. We already use the env var
     * system that vue-cli offers so implementing something outside the build
     * process that parses the service-worker file would be messy. This lets us
     * dump the env vars as configured for the rest of the app and import them into
     * the service-worker script to use them.
     *
     * We need to do this as the service-worker script is NOT processed by webpack
     * so we can't put any placeholders in it directly.
     */
    
    module.exports = class DumpVueEnvVarsWebpackPlugin {
      constructor(opts) {
        this.filename = opts.filename || 'env-vars-dump.js'
      }
    
      apply(compiler) {
        const fileContent = Object.keys(process.env)
          .filter(k => k.startsWith('VUE_APP_'))
          .reduce((accum, currKey) => {
            const val = process.env[currKey]
            accum += `const ${currKey} = '${val}'\n`
            return accum
          }, '')
        const outputDir = compiler.options.output.path
        if (!fs.existsSync(outputDir)) {
          // TODO ideally we'd let Webpack create it for us, but not sure how to
          // make this run later in the lifecycle
          fs.mkdirSync(outputDir)
        }
        const fullOutputPath = path.join(outputDir, this.filename)
        console.debug(
          `[DumpVueEnvVarsWebpackPlugin] dumping env vars to file=${fullOutputPath}`,
        )
        fs.writeFileSync(fullOutputPath, fileContent)
      }
    }
    
  2. 在您的 vue-cli 配置中使用插件(vue.config.js或者vue-config/config.default.js如果您的配置被拆分为几个文件)

    // import our plugin (change the path to where you saved the plugin script)
    const DumpVueEnvVarsWebpackPlugin = require('./DumpVueEnvVarsWebpackPlugin.js')
    
    module.exports = {
      // other stuff...
      configureWebpack: {
        plugins: [
          // We add our plugin here
          new DumpVueEnvVarsWebpackPlugin({ filename: 'my-env-vars.js' })
        ],
      },
    }
    
  3. 在我们的 service worker 脚本中,我们现在可以导入我们使用 Webpack 插件编写的文件(它会在构建完成后出现,并且 service worker 不会在开发模式下运行,所以我们应该是安全的)

    importScripts('./my-env-vars.js') // written by DumpVueEnvVarsWebpackPlugin
    const fcmSenderId = VUE_APP_FCM_SENDER_ID // comes from script imported above
    console.debug(`Using sender ID = ${fcmSenderId}`)
    
    // use the variable
    firebase.initializeApp({
        'messagingSenderId': fcmSenderId
    })
    

它并不完美,但它确实可以完成工作。它很干,因为您只需在一个地方定义所有环境变量,并且整个应用程序使用相同的值。另外,它不处理源代码控制中的任何文件。我不喜欢插件在 Webpack 生命周期中运行得太早,所以我们必须创建dist目录,但希望比我更聪明的人能解决这个问题。

于 2019-07-16T06:22:38.437 回答