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

Question

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

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

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 0.x 在我们的 Vue 组件中使用这些环境变量？

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 文件中获取所有内容，并使其在所有组件中可用，因为生产构建只需要您需要的 key 。