Vue.js 如何为Vue项目中/public文件夹内的文件启用dotenv变量？

我在配置Webpack方面没有什么经验，对此我有点不知所措

我一直在做一个基于这个的Vue2项目。该项目有一个名为

public

的文件夹，其中包含入口点文件

index.html

。在该

index.html

文件中，我通常可以访问.env环境变量（例如

process.env.VUE\u APP\u PAGE\u TITLE

）

我在

public

文件夹

navbar.HTML

中包含了一个HTML片段，因为我希望它可以通过提供给其他应用程序。然而，我似乎无法让我的环境变量在

/public/navbar.html

中工作，即使它们在

/public/index.html

中工作正常。我想这是我的网页配置的问题

我知道我可以通过编辑项目根目录中名为vue.config.js的文件来编辑我的网页配置。此文件包含一个configureWebpack对象，但我不知道如何使其在

/public/navbar.html

中启用环境变量。任何帮助都将不胜感激

---

编辑： 以下是我的vue.config.js：

const HtmlWebpackPlugin = require('html-webpack-plugin');

function resolveClientEnv() {
  const env = {};
  Object.keys(process.env).forEach((key) => {
    env[key] = process.env[key];
  });
  env.BASE_URL = '/';
  return env;
}


module.exports = {
  configureWebpack: {        
    plugins: [
      new HtmlWebpackPlugin({
        // This is the generated file from the build, which ends up in public/navbar.html
        filename: 'navbar.html',
        // This is the source file you edit.
        template: 'public/navbar.html',
        templateParameters: (compilation, assets, pluginOptions) => {
          let stats;
          return Object.assign({
            // make stats lazy as it is expensive
            get webpack() {
              return stats || (stats = compilation.getStats().toJson());
            },
            compilation,
            webpackConfig: compilation.options,
            htmlWebpackPlugin: {
              files: assets,
              options: pluginOptions,
            },
          }, resolveClientEnv());
        },
      }),
    ],
  },
};

这是我的自定义HTMLWebpackPlugin根据

vue inspect

添加到配置中的内容：

{
  options: {
    template: 'public/navbar.html',
    templateContent: false,
    templateParameters: function () { /* omitted long function */ },
    filename: 'navbar.html',
    hash: false,
    inject: true,
    compile: true,
    favicon: false,
    minify: 'auto',
    cache: true,
    showErrors: true,
    chunks: 'all',
    excludeChunks: [],
    chunksSortMode: 'auto',
    meta: {},
    base: false,
    title: 'Webpack App',
    xhtml: false
  },
  childCompilerHash: undefined,
  childCompilationOutputName: undefined,
  assetJson: undefined,
  hash: undefined,
  version: 4
}

---

使用此标准插件生成

navbar.html

如果您阅读了文档，那么

templateParameters

选项就是您传递env变量的对象。这些变量将在

navbar.html

中提供

这与vue cli用于

index.html

的插件相同。如果运行vue命令，您可以看到它们为插件提供了哪些选项。您需要阅读

resolveClientEnv（）

的源代码以了解其工作原理

例如：

/*config.plugin（'html-portal'））*/
新HtmlWebpackPlugin(
{
templateParameters：（编译、资产、插件操作）=>{
//增强html网页包插件的内置模板参数
让统计数据
返回Object.assign({
//使统计数据懒惰，因为它是昂贵的
获取网页包（）{
返回stats | |（stats=compilation.getStats（）.toJson（））
},
汇编：汇编，
webpackConfig:compilation.options，
htmlWebpackPlugin：{
档案：资产，
选项：插件操作
}
}，resolveClientEnv（选项，true/*raw*/）
},
缩小：{
removeComments：对，
拼贴空白：对，
RemoveAttribute属性：对，
collapseBooleanAttributes：没错，
removeScriptTypeAttributes:true
},
块：[
“区块供应商”，
“块公共”，
“门户”
],
模板：“C:\\Users\\Eric\\workspace\\arc core\\portal\\client\\templates\\portal.html”，
文件名：“portal.html”，
标题：“Arc门户”
}
),

这有点多，最简单的例子是：

新的HtmlWebpackPlugin({
//这是从构建生成的文件，该文件以public/navbar.html结尾
文件名：“navbar.html”，
//这是您编辑的源文件。
模板：“templates/navbar.html”，
模板参数：{
我的风险：“我的风险”
}
}),

我尝试实现您的解决方案，但无法在navbar.html中使用环境变量。你知道为什么吗？我将更新的vue.config.js添加到原始问题中。此外，我运行了vue inspect，输出似乎表明我尝试配置HtmlWebpackPlugin并没有更改原始HtmlWebpackPlugin或添加新的HtmlWebpackPlugin，而是添加了一个匿名对象，其中包含我在vue.config.js中键入的模板信息。尝试硬编码一个env变量，看看是否有效。如果是这样，我们就知道插件正在工作，但是

process.env

Hardcoded变量有问题，所以我猜插件配置有问题。不幸的是，我不知道它可能是什么/我自己搞不好。我不明白应该怎么做才能将环境变量从

process.env

导入

public/index.html

文件。