Question

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

此代码破坏了版本，因为Webpack从2.0开始不允许使用自定义属性：

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

错误：

WebpackOptionsValidationError：无效的配置对象。 Webpack 已使用不匹配的配置对象进行了初始化 API模式。 -配置具有未知属性“ 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 })
    ]}
  }
}

注意：这将占用环境文件中的所有东西，并使其在所有组件中都可用，对于生产版本而言，只需要您需要的密钥即可。

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

1 个答案: