如何通过configureWebpack向Vuepress组件公开Node环境变量？

我们正在使用原始的 Vuepress（0.x 分支）并且我们想要使用配置Webpack https://v0.vuepress.vuejs.org/config/#configurewebpackVuepress 配置文件的方法来导出一些自定义变量。

此代码破坏了构建，因为 Webpack 自 2.0 以来不允许自定义属性：

configureWebpack: (config) => {
  config.env = process.env
}

Error:

WebpackOptionsValidationError：配置对象无效。网页包 已使用不匹配的配置对象进行初始化 API 架构。 - 配置具有未知属性“env”。

我还查看了 Webpack 文档定义插件 https://webpack.js.org/plugins/define-plugin/然而问题是configureWebpack方法实际上并没有暴露 Vuepress 使用的 webpack 实例 - 它直接尝试改变 webpack 选项（这是不允许的） - 但由于 webpack 实例不可用，我们不能简单地按照 webpack 想要的方式定义一个插件到。

有谁知道公开可配置环境变量的正确方法，我们可以使用 Vuepress 0.x 在 Vue 组件中使用这些变量？

嗯...我们花了一些时间与 VuePress 的构建管道争论并跳过 Webpack 的火圈，但由于 VuePress 使用 Webpack，我们可以简单地在我们的配置文件中 require 它（我假设公开 VuePress 的 Webpack 实例所需的方法，该方法是不正确的）。

如果使用 dotenv，您可以使自定义环境变量可用于您的组件：

// .vuepress/config.js
require('dotenv').config()
const webpack = require('webpack')

module.exports = {
  configureWebpack: (config) => {
    return { plugins: [
      new webpack.EnvironmentPlugin({ ...process.env })
    ]}
  }
}

注意：这需要一切从您的 env 文件中获取它并使其在所有组件中可用，对于生产版本，仅使用您需要的密钥。