vue如何读取外部配置文件
更新时间：2024年03月04日 09:25:00 作者：繁星如梦&
这篇文章主要介绍了vue如何读取外部配置文件问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue读取外部配置文件
1.首先：
在public中创建static文件夹，在static文件夹中创建config.js文件
2.创建完成在public中的index.html引入
<script src="./static/config.js"></script>
3.在config.js写入
window.server = {
// 后端配置
SERVER_API:"http://..."
}
4.在页面中使用
//获取外部链接 let confapi = window.server.SERVER_API; console.log(confapi)
这样vue就可以读取外部配置文件
vue项目读取配置文件，不重新打包
在项目开发时，经常遇到开发环境和生产环境因为某几个引用地址或是参数不一致，部署测式环境打个包，上线生产时又要重新出包，这样测试又会担心最后这此打包会不会出问题，到生产环境还有问题，为了解决这个问题，特将这些配置信息剥离出来，不在进行重新打包，只需要修改一个文件，vue打包好的项目直接读取配置文件内容就可以了。
具体方法如下：
1.public下创建project.config.json
project.config.json
{
url:"http://www.demo.com"
}2.入口文件中读取project.config.json
将配置信息保存于vue原型，方便调用。
async function getConfig(){
return Vue.prototype.$axiosJson.get("./project.config.json").then(res=>{
Vue.prototype.$config=res.data
})
}
async function createApp(){
new Vue({
router,
store,
render:h=>h(App)
}).$mount(document.body.appendChild(document.createElement("div")))
}
(async function(){
await getConfig();
await createApp();
})()经过以上步骤就完成了配置文件的读取，之后便可以在文件中调用了。
需要注意的是，不能用于store中，因为store载入比实例化vue要快。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue项目中使用token的身份验证的简单实践，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-03-03
ref 和 reactive 是 Composition API 中用来创建响应式数据的两个核心函数,在本篇文章中,我们将详细讲解如何使用 ref 和 reactive 来创建响应式数据,并展示它们之间的区别和使用场景,需要的朋友可以参考下2024-11-11
详解Vue-cli webpack移动端自动化构建rem问题
这篇文章主要介绍了详解Vue-cli webpack移动端自动化构建rem问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
这篇文章主要为大家介绍了Vue之过滤器，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助,希望能够给你带来帮助2021-11-11
这篇文章主要为大家详细介绍了vue的h5日历组件使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-09-09
仿照e签宝,实现pdf电子签章 => 拿到pdf链接,移动章的位置,获取章的坐标,怎么实现呢,下面小编给大家介绍vue2实现pdf电子签章问题记录,感兴趣的朋友一起看看吧2023-12-12
使用yarn build 打包vue项目时静态文件或图片未打包成功的问题及解决方法
这篇文章主要介绍了使用yarn build 打包vue项目时静态文件或图片未打包成功的问题及解决方法，解决方法不复杂通过实例代码给大家介绍的非常详细，需要的朋友可以参考下2023-08-08
今天小编就为大家分享一篇Vue 实现把表单form数据 转化成json格式的数据，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10
这篇文章主要介绍是八种vue实现组建通信的方式，包括、props 父组件与子组件通信、$emit 子组件父组件传递、$emit与props结合 兄弟组件传值等等，想具体了解的朋友可以参考下面文章的具体内容2021-09-09
这篇文章主要介绍了vue无限轮播插件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
最新评论