时间戳

首页 > 解决方案 > 如何通过 configureWebpack 向 Vuepress 组件公开 Node 环境变量？

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

问题描述

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

这段代码破坏了构建，因为 Webpack 从 2.0 开始就不允许自定义属性：

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

错误：

WebpackOptionsValidationError：配置对象无效。Webpack 已使用与 API 模式不匹配的配置对象进行初始化。- 配置具有未知属性“env”。

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

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

标签： node.jswebpackvuepress

解决方案

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

推荐阅读