vue2.0 外部配置文件

vue2.0 外部配置文件,重点是打包后也可以 修改配置参数

 
一、在public中创建static文件夹,在static文件夹中创建config.js文件

config.js

{
    "apiUrl": "http://192.168.1.5:5011/httpCli" 
}

二、在 man.js 中 使用 axios 来读取

存在 Vue.prototype.apiUrl 变量中
复制代码
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui';
import axios from 'axios'
import 'element-ui/lib/theme-chalk/index.css';
import vueConfig from '../vue.config';
Vue.use(ElementUI);
Vue.prototype.$axios=axios;

Vue.config.productionTip = false

//获取 外部config.json 
Vue.prototype.$http = axios;
Vue.prototype.getConfig = function () {
  this.$http.get('static/config.json').then((res)=>{
    Vue.prototype.apiUrl = res.data.apiUrl;
 
    //console.log('Vue.prototype.getConfig() ' + Vue.prototype.apiUrl);
  }).catch(err => {
    console.log(err);
  })
}

Vue.prototype.getConfig();
 new Vue({
  router,
  store,
  render: function (h) { return h(App) }
 
}).$mount('#app')
复制代码

在模板页中直接使用即可

console.log(this.apiUrl); 

 

posted @   海乐学习  阅读(138)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· 上周热点回顾(2.24-3.2)
历史上的今天:
2022-07-07 Vue 表格 增删改查 纯前端
2022-07-07 Vue 列表 增删改 前端代码
2022-07-07 Vue var 变量 按数字形式 加 1
2022-07-07 Vue el-dialog 动态修改 title 值
2022-07-07 Intellij IDEA 的maven项目 通过Java代码,实现 Jetty 的 Http服务器
2022-07-07 JS 将json字符串 转为 json对象 中JSON.parse和eval的区别及用法
2022-07-07 JS/Jquery遍历JSON对象、JSON数组、JSON数组字符串、JSON对象字符串
点击右上角即可分享
微信分享提示