Как отделить указанный файл с помощью веб-пакета в проекте vue-cli

Question

У меня есть файл конфигурации (config.js), который зависит от двух файлов: local.js (для среды разработки) и deploy.js (для производственной среды). После run serve или run build будут созданы некоторые конфигурации, зависящие от среды. Я использовал его следующим образом:

<template>
</template>
<script>
import config from '@/assets/scripts/config.js'
export default {
  data() {
     return {
       apiBasePath: config.apiBasePath
     }
  }
}
</script>

Мой config.js:

import local from '../../../config/local'
import deploy from '../../../config/deploy'
export default {
  apiBasePath:
    process.env.NODE_ENV === 'production'
      ? deploy.corsDomain + ':' + deploy.emergencyPort
      : local.corsDomain + ':' + local.emergencyPort,
  fileBasePath:
    process.env.NODE_ENV === 'production'
      ? deploy.corsDomain + ':' + deploy.emergencyPort
      : local.corsDomain + ':5000',
  dataBasePath:
    process.env.NODE_ENV === 'production'
      ? deploy.corsDomain + ':' + deploy.emergencyPort
      : 'http://localhost' + ':' + local.emergencyPort,
  vocApiPath:
    process.env.NODE_ENV === 'production'
      ? deploy.corsDomain + ':' + deploy.sharePort
      : local.corsDomain + ':' + local.sharePort,
  visualBasePath:
    process.env.NODE_ENV === 'production'
      ? deploy.corsDomain + ':' + deploy.simulatorPort
      : local.corsDomain + ':' + local.simulatorPort,
  spotBasePath:
    process.env.NODE_ENV === 'production'
      ? deploy.corsDomain + ':' + deploy.samplePort
      : local.corsDomain + ':' + local.samplePort,
  shareBasePath:
    process.env.NODE_ENV === 'production'
      ? deploy.corsDomain + ':' + deploy.sharePort
      : local.corsDomain + ':' + local.sharePort,
  envBasePath:
    process.env.NODE_ENV === 'production'
      ? deploy.corsDomain + ':' + deploy.envPort
      : local.corsDomain + ':' + local.envPort,
  ep360BasePath:
    process.env.NODE_ENV === 'production'
      ? deploy.corsDomain + ':' + deploy.ep360Port
      : local.corsDomain + ':' + local.ep360Port,
  defaultDivision: {
    province: deploy.defaultProvince ? deploy.defaultProvince : '浙江省',
    city: deploy.defaultCity ? deploy.defaultCity : '宁波市',
    area: deploy.defaultArea ? deploy.defaultArea : '鄞州区'
  }
}

Но после компоновки эти конфигурации будут вставлены в общие сценарии чанка.
Мое назначениеis:
Разделить этот файл конфигурации из моего общего блока как один (предположим, его имя - config. [hash] .js), и он станет тегом вставки скрипта в HTML, когда run build. После этого я могу изменить некоторые конфигурации на сервере, и мне не нужно перестраивать свой проект, если я установил некоторые неправильные конфигурации

Подробнее : мой проект является проектом с несколькими записями,в каждой записи есть почти импорт config.js. Я попытался выполнить динамический импорт, как сказал @Arunmozhi. Я не могу получить конфигурации в функции data из-за возврата Promise, хотя фрагмент config разделен. Я пытаюсь использовать splitChunks для решения своих проблем, но это не сработало.

optimization: {
  splitChunks: {
    cacheGroups: {
      myconfig: {
        test: module => {
          module
            .identifier()
            .split('/')
            .reduceRight(item => item)
            .indexOf('config') !== -1
        },
        name: 'myconfig',
        enforce: true,
        chunks: 'all',
        reuseExistingChunk: true,
        minChunks: 1,
        minSize: 0
      }
    }
  }
}

Answer 1

Чтобы отдельный тег сценария без проходил через обработку веб-пакета, вы должны извлечь его из src и переместить в каталог public и добавить тег сценария в index.html. Если вы структурируете свою конфигурацию таким образом, чтобы она была доступна как глобальный объект (например, document.myAppConfig), то вы можете получить доступ к значениям конфигурации, не выполняя import.

* 1010. * Редактировать: Как прокомментировано, отображаемый файл конфигурации зависит от процесса BUILD и не может быть сгенерирован заново без перестройки проекта. Однако самое близкое к достижению гибкости редактирования конфигурации после сборки - использовать функцию import() вместо формата модуля ES6 import config from "config.js".

Если вы можете найти способ импортировать конфигурациюкак это

config: () => import(/* webpackChunkName: "config" */ "./config.js")

это приведет к созданию отдельного чанка, который вы позже сможете редактировать независимо.

CAVEAT: Это создаст проблемы для пользователей из-за кэширования веб-браузеровресурсы.