如何使用 configureWebpack 使自定义变量可用于组件？

Posted 2023-02-22

【中文标题】如何使用 configureWebpack 使自定义变量可用于组件？

【英文标题】：How do I expose Node environment variables via configureWebpack to Vuepress components?

【发布时间】：2019-05-09 04:38:15

【问题描述】：

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

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

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

错误：

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

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

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

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

【讨论】：

我正在这样做，但我仍然在浏览器中得到process is not defined。我可能做错了什么？