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 @ 2023-07-07 16:20  海乐学习  阅读(92)  评论(0编辑  收藏  举报