如何通过 configureWebpack 将 Node 环境变量暴露给 Vuepress 组件？

Question

我们正在使用原始的 Vuepress（0.x 分支），我们想使用 Vuepress 配置文件的 configureWebpack 方法来导出一些自定义变量。

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

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

错误：

WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema. - configuration has an unknown property 'env'.

我还查看了 defining plugins 的 Webpack 文档，但问题是 configureWebpack 方法实际上并没有公开 Vuepress 使用的 webpack 实例——它直接尝试改变 webpack 选项（这是不允许的） - 但由于 webpack 实例不可用，我们不能简单地按照 webpack 希望我们的方式定义插件。

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

Answer 1

好吧......它与 VuePress 的构建管道进行了一些争论并跳过了 Webpack 火圈，但是由于 VuePress 使用 Webpack，我们可以简单地在我们的配置文件中要求它（我假设需要公开 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 文件中获取 所有内容 并使其在所有组件中可用，对于生产构建只获取您需要的密钥。

如何通过 configureWebpack 将 Node 环境变量暴露给 Vuepress 组件？

How do I expose Node environment variables via configureWebpack to Vuepress components?

node.js

webpack

vuepress