vue如何读取外部配置文件
作者：繁星如梦&
这篇文章主要介绍了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要快。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。