基于Vue.js的CDN多后台通用前端脚本

Question

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

例如，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端点？

非常感谢。

Answer 1

听起来你需要一些类似于.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
    })