温馨提示:本文翻译自stackoverflow.com,查看原文请点击:axios - Vue.js based common front-end script on CDN with multiple backends
axios frontend vue.js

axios - 在CDN上具有多个后端的基于Vue.js的通用前端脚本

发布于 2020-04-19 14:58:28

我正在Vue.js中设计一个通用的前端自定义组件库(vue-components.js)。该库将托管在CDN上,并且将使用CDN中的单个.js文件构建具有不同后端和域名(例如Java,.Net,PHP)的应用程序。

例如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-components.js,那么不同的应用程序将如何指定自己的AXIOS API端点以从前端获取输入值结束。

我目前正在研究自定义AXIOS实例,但我知道端点也必须进行集中配置。有没有办法让不同的后端指定他们自己的端点或设计,以便每个引用此公共cdn vue-components.js文件的应用程序都可以在自己的服务器上本地配置自己的API端点?

非常感谢。

查看更多

提问者
sir.superstar
被浏览
7
Michal Bieda 2020-02-05 19:19

听起来您需要与.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>

然后在您的组件中使用此全局可用对象创建axios实例

// 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
    })