我正在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端点?
非常感谢。
听起来您需要与.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
})
谢谢!这个想法奏效了。就像将定义为变量的端点从本地副本传递到定义axios端点URL的maincomponents.js一样简单。