Используйте веб-пакет для использования определенного файла в зависимости от среды узла

Question

Я работаю над приложением Vue (используя cli 3).Стороннему компоненту внешнего интерфейса требуется файл конфигурации.Я хотел бы использовать разные файлы в зависимости от моего узла env, но неясно, как это сделать.Например, моя структура каталогов может иметь tree.production.js и tree.development.js.В моем основном javascript я не могу указать

import {tree} from `./assets/tree.${process.env.NODE_ENV}.js`;

Я также не могу использовать файлы .env для указания

import {tree} from `./assets/tree.${process.env.VUE_APP_TREE}.js`;

Я хотел бы попробовать использоватьwebpack a la vue.config.js, чтобы использовать правильный файл и переименовать его в tree.js, так что в моем коде я могу просто указать

import {tree} from "./assets/tree.js"

Или действительно любые лучшие рекомендации о том, как добиться этого довольно обыденногои, казалось бы, обычное переключение dev / prod.

Что-то вроде

//vue.config.js
module.exports = {
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // do something with tree.production.js...
    } else {
      // do something with tree.development.js
    }
  }
}

Answer 1

Корень вашей проблемы в том, что ES6 import (и export) анализируются статически - это значит, что вы не можете иметь динамические значения, как вы пытаетесь.Вы можете попробовать динамический импорт с использованием синтаксиса import().then(module => ...), но это не совсем то, что вам нужно здесь.

Я думаю, что вы ищете resol.alias .В вашей конфигурации веб-пакета это будет выглядеть примерно так:

  //...
  resolve: {
    alias: {
      'assets/tree': path.resolve(__dirname, `path/to/assets/tree.${process.env.NODE_ENV}.js`)
    }
  }

, а внутри вашего приложения вы сможете импортировать его так:

import { tree } from 'assets/tree';

Answer 2

жаль слышать, что у вас проблемы с этим.Вы правы, вы не сможете использовать статический импорт для загрузки вашего файла.Есть варианты, хотя в зависимости от того, что вы планируете делать с tree.js.Я не знаю, что такое дерево, но я предполагаю, что вас интересует только запуск вашего кода в среде веб-пакета.

Итак, какие у вас есть варианты, возможно, рассмотрите один из следующих вариантов:

Динамический импорт

Мне кажется, что это наиболее вероятная вещь, если вы можете использовать асинхронный подход с вашим кодом, вы можете динамически загружать свой код (также использовать преимущества разделения кода):

• https://webpack.js.org/guides/code-splitting/#dynamic-imports
• https://medium.com/front-end-weekly/webpack-and-dynamic-imports-doing-it-right-72549ff49234

Условно загрузить через прокси

В этом ответе Алехандро Силва использовал проксифайл для условной загрузки файла на основе ENV_VAR.Вы можете настроить веб-пакет так, чтобы он не требовал невозможных путей.

• Условная сборка на основе среды с использованием Webpack

---

Другие, которые могут соответствовать вашим требованиям

• осужденный - для загрузки и объединения конфигурации