Vue. js общий сценарий на основе CDN с несколькими бэкэндами - PullRequest
Новая
       4

Vue. js общий сценарий на основе CDN с несколькими бэкэндами

0 голосов
/ 05 февраля 2020

Я проектирую общую библиотеку пользовательских компонентов (vue -компоненты. js) в Vue. js. Эта библиотека будет размещена на CDN, и будут приложения с разными бэкэндами и доменными именами (например, Java,. Net, PHP), использующие этот единственный файл. js в CDN для создания своего внешнего интерфейса.

например, Front-end для Java приложения 

<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://xyz.s3-aws-domain.com/vue-components.js"></script>
</head>

<body>
//custom vue components called.
<vue-inputbox></vue-inputbox>
<vue-btnsubmit><vue-btnsubmit>
</body>

Предполагая, что каждое отдельное приложение (сочетание одностраничных приложений и многостраничных приложений) с разными бэкэндами будет вызывать одно и то же централизованно размещенное vue -компоненты. js, как различные приложения будут указывать свои собственные конечные точки API AX IOS для получения входных значений из внешнего интерфейса.

В настоящее время я изучаю пользовательские экземпляры AX IOS, но я понимаю, что конечные точки также должны быть настроены централизованно. Есть ли способ позволить различным бэкэндам указывать свои собственные конечные точки или дизайн так, чтобы каждое приложение, ссылающееся на этот общий cdn vue -компоненты. js файл, могло конфигурировать свои собственные конечные точки API локально на своем собственном сервере?

Огромное спасибо.

1 Ответ

0 голосов
/ 05 февраля 2020

Похоже, вам нужно что-то похожее на файлы / переменные .env, но на стороне клиента.

Каждый из ваших бэкэндов может сгенерировать простой JS файл общего формата, например: 

<script>
    window.__env = {
        apiBackend: 'http://some.site/api/1/'
    }
</script>

и затем включите его перед компонентами из CDN 

<head>
    <!-- libs -->
    <script src="env.js"></script>
    <script src="https://xyz.s3-aws-domain.com/vue-components.js"></script>
</head>

, а затем в ваших компонентах используйте этот глобально доступный объект для создания топора ios instance 

// api.js
export const API = axios.create({
    baseURL: __env.apiBackend
})

// in some component
import API from 'api.js'

// in vue component method/action/vuex etc
API
    .post('getSomeData', {id: 123})
    .then(response => {
        // do something with data from http://some.site/api/1/getSomeData
    })
...