Как я могу установить URL прокси из внешнего файла config.json в vue.config.json

Question

Как мы можем установить URL прокси из внешнего файла config.json, как в приложениях .net, которые мы конфигурируем через web.config.Я использую шаблон vue-cli (Vue2 + webpack) + vuex + axios.

Я проделал некоторую работу для этого, но это бесполезно, я импортирую config.json и использую данные конфигурации из него, но после сборки веб-пакета, включающего этот файл конфигурации в output.min.js

В настоящее время я вручную изменяю URL-адрес сервера в коде перед запуском сборки для производственного сервера или сборки для сервера разработки, но необходимо отдельно использовать файл config.json, чтобы я мог изменить прокси-URL изКонфигурационный файл на производстве.

Answer 1

Вы можете использовать разбиение кода веб-пакета с комментарием webpackChunkName.Это создаст отдельный чанк, который затем можно будет изменить после сборки.

Вот код, позволяющий сделать его доступным внутри компонента vue

config.json:

{
  "abc": 123,
  "def": 123
}

компонент vue:

export default {
  name: 'app',
  data: function () {
    return {
      config: null
    }
  },
  created() {
    import (/* webpackChunkName: "config", webpackMode: "lazy-once" */ "./config.json").then(r => this.config = r.default);
  }
}

снаружикомпонента

let config;
import(/* webpackChunkName: "config" */ './config.js')
  .then(r => {config : r.default})
  .then(/* do stuff with config */);

Некоторые вещи, на которые следует обратить внимание: - поскольку он больше не является частью одного и того же пакета, пакет конфигурации должен исходить от сетевого запроса, что означает, что ответ асинхронный, поэтому вы не можете выполнить простое задание.Это может потребовать менее чем тривиальных изменений в вашем коде, так как вы не сможете использовать значение до его загрузки, поэтому любой другой код, который полагается на него, должен будет подождать.- используете ли вы json или js-файл в исходном коде, результирующий пакет webpack будет js-файлом и будет почти таким же, хотя версия json немного меньше

пакет конфигурации будет выглядеть примерно так

(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["config"],{"7dc5":function(n){n.exports={abc:123,def:123}}}]);
//# sourceMappingURL=config.26910bd8.js.map

где {abc:123,def:123} - это часть данных, которую теперь легко изменить.

ресурсы:

• документация по разбиению кода веб-пакета: https://webpack.js.org/guides/code-splitting/
• отложенная загрузка, показывающая функцию в vue https://router.vuejs.org/guide/advanced/lazy-loading.html#grouping-components-in-the-same-chunk