Как включить переменные dotenv для файла в папке / publi c в проекте Vue?

Question

У меня очень мало опыта в настройке Webpack, и я немного перегружен этой проблемой.

Я работал над проектом Vue2, построенным поверх этого шаблона, В проекте есть папка public, в которой содержится файл точки входа index.html. Внутри этого файла index.html я обычно могу получить доступ к переменным окружения .env (например, process.env.VUE_APP_PAGE_TITLE).

Я включил фрагмент HTML в папку public, navbar.html, потому что я хочу он будет доступен для других приложений через https://example.com/public/navbar.html. Однако я не могу заставить свои переменные окружения работать внутри ./public/navbar.html, хотя они прекрасно работают в ./public/index.html. Я предполагаю, что это проблема с моей конфигурацией веб-пакета.

Я знаю, что могу редактировать свою конфигурацию веб-пакета, отредактировав файл в моем проекте root с именем 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
}

Answer 1

Используйте этот стандартный плагин для генерации navbar.html. https://github.com/jantimon/html-webpack-plugin.

Если вы читаете документы, опция templateParameters - это то, для чего вы передаете переменные env. Эти переменные будут доступны в navbar.html.

Это тот же плагин, который vue -cli использует для index.html. Если вы запустите команду vue inspect, вы увидите, какие опции они предоставляют плагину. Вам нужно прочитать исходный код для resolveClientEnv(), чтобы увидеть, как он работает.

Пример:

    /* config.plugin('html-portal') */
    new HtmlWebpackPlugin(
      {
        templateParameters: (compilation, assets, pluginOptions) => {
                // enhance html-webpack-plugin's built in template params
                let stats
                return Object.assign({
                  // make stats lazy as it is expensive
                  get webpack () {
                    return stats || (stats = compilation.getStats().toJson())
                  },
                  compilation: compilation,
                  webpackConfig: compilation.options,
                  htmlWebpackPlugin: {
                    files: assets,
                    options: pluginOptions
                  }
                }, resolveClientEnv(options, true /* raw */))
              },
        minify: {
          removeComments: true,
          collapseWhitespace: true,
          removeAttributeQuotes: true,
          collapseBooleanAttributes: true,
          removeScriptTypeAttributes: true
        },
        chunks: [
          'chunk-vendors',
          'chunk-common',
          'portal'
        ],
        template: 'C:\\Users\\Eric\\workspace\\arc-core\\portal\\client\\templates\\portal.html',
        filename: 'portal.html',
        title: 'Arc Portal'
      }
    ),

Это немного, минимальный пример будет:

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: 'templates/navbar.html',
    templateParameters: {
        MY_VAR: 'myVar'
    }
}),