我想知道是否有可能让Vue应用程序读取外部配置文件。我想象一下,我部署应用程序时,将应用程序与配置文件一起发布;此时应该可以在外部文件中更改配置,而无需重新构建整个应用程序。是否有办法实现这个结果?现在,我正在使用一个独立的Vuex存储库,但我无法在不重新构建整个应用程序的情况下更改配置。我忘了提到该项目是使用Vue CLI创建的。
您可以从公共文件夹获取config.json
,然后在resolve回调中加载Vue应用程序。
将配置密钥放置在/public/config.json
文件中。
{
"KEY": "value"
}
然后在您的/src/main.js
文件中
fetch(process.env.BASE_URL + "config.json")
.then((response) => response.json())
.then((config) => {
Vue.prototype.$config = config
new Vue({
router,
store,
render: (h) => h(App)
}).$mount("#app")
})
您可以在整个应用程序中使用已加载的配置。然后您只需使用:
mounted() {
this.$config.KEY // "value"
}
在你的Vue组件中
2022年11月23日更新(添加Vue 3版本):
// VUE 3 Version
const app = createApp(App)
fetch(process.env.BASE_URL + "config.json")
.then((response) => response.json())
.then((config) => {
// either use window.config
window.config = config
// or use [Vue Global Config][1]
app.config.globalProperties.config = config
// FINALLY, mount the app
app.mount("#app")
})
以下是我的做法:
在公共文件夹中创建一个config.js文件,并设置您想要的选项:
window.VUE_APP_API_KEY = 'blahblahblah';
接着在你的public/index.html文件中,在head标签中加入以下代码:
<script type="text/javascript">
var cachebuster = Math.round(new Date().getTime() / 1000);
document.write('<scr' + 'ipt type="text/javascript" src="<%= BASE_URL %>config.js?cb=' + cachebuster + '"></scr' + 'ipt>');
</script>
然后在您的Vue应用程序中,您只需要调用 window.VUE_APP_API_KEY。简单快捷 :)
script
标签分成两部分,然后再通过连接操作合并它们? - bernie我有一个由Node提供的路由,返回动态创建的JS文件,并定义了一个全局对象,我在其中存储配置信息。这与Vue无关。
在index.html
中:
<script type="text/javascript" src="config.js"></script>
node
中: app.get('/config.js', (request, reply) => {
reply.header('Content-Type', 'application/javascript');
reply.send(`MyConfig = ${JSON.stringify(config)}`);
});
在组件中(或任何其他地方):
{
data: () => ({
someField: MyConfig.someField
})
}
node.js
。请查看我的解决方案,它不需要任何外部服务器。此外,建议的框架和代码示例并不对应于任何特定的库。 - Hammad
fetch()
并获取外部 JSON 文件。 - Hammad?t=currentTimestamp
)来请求新文件。否则,浏览器会缓存请求。或者添加适当的Cache-Control头。 - Andyapp.mount()
包装在 fetch 的 then 回调中即可。 - Hammad