vue 配置打包后在static文件下的config.js配置文件,可在服务器找到文件更改,作用于整个项目

本文详细介绍了如何通过Vuex在Vue应用中动态管理配置文件,包括在config.js中存储参数、main.js中加载配置并设置API路径,以及如何在store模块中组织和使用这些配置。适合频繁修改参数场景的开发实践。
摘要由CSDN通过智能技术生成

前言:此示例需要使用vuex,来存储获取参数,所以使用前请先安装插件(此方法适用需要修改参数较多时使用)

一、首先在static文件下创建“config.js”,这个文件打包后不会被编译,所以放在这里方便在服务器上准确找到对应文件修改参数,如图:

二、在main.js中配置configjs的链接

import axios from 'axios';

let myConfigPath = "/wechat/static/config.js"

if (process.env.NODE_ENV === "development") {

  myConfigPath = "../static/config.js"

}

axios.get(myConfigPath, { headers: { "Cache-Control": "no-cache" } }).then(response => {

  Vue.prototype.$myConfig = eval(response.data);

  Vue.prototype.$apiUrl = eval(response.data).apiUrl;

  /* eslint-disable no-new */

  new Vue({

    el: '#app',

    router,

    store,

    components: {

      App

    },

    template: '<App/>'

  })

})

三、如需要修改api的路径,则需在axios.js中配置相应参数

let baseURL;
function getApiUrl(){
  return new Promise((resolve, reject) => {
    if(baseURL){
      resolve(baseURL)
    }else{
     let myConfigPath = "/wechat/static/config.js"
      if (process.env.NODE_ENV === "development") {
        myConfigPath = "../../static/config.js"
      }
      let myConfig;
      axios.get(myConfigPath, { headers: { "Cache-Control": "no-cache" } }).then(response => {
        myConfig = eval(response.data);
        if(process.env.NODE_ENV === 'development'){      // 开发环境
          baseURL = '/api'
        }else{
          baseURL = myConfig.apiUrl;
        }
        resolve(baseURL)
      })
    }
 });
}

四、 在src文件夹下创建store文件,并在其中创建index.js文件,来引入vuex,并配置新增的user.js

 import Vue from 'vue'
 import Vuex from 'vuex'
 import user from './modules/user'
 Vue.use(Vuex)

 const store = new Vuex.Store({
   modules: {
     user
   }
 })

 export default store

五、在src的store文件下创建==>modules文件==>user.js,用于组件使用vuex取值使用

 六、配置完毕,需要在对应组件赋值/取值(不需要本地修改参数,可忽略此步骤)

如某组件中需要改变值,

 let menuArr = data.items;  

this.$store.commit('SET_questionnaireNumber', menuArr);  

取值时使用:this.$store.state.user.questionnaireNumber

七、如仅在服务器上修改参数,需要在用到参数的组件中做如下操作(代码与上面描述不符,仅供参考)

computed:如questionnaireNumber在服务器或本地修改后给及时更新questionnaireNumber的值

watch:意为computed改变时更新哪个方法,比如这里questionnaireNumber改变后我的请求接口的方法要改变,这里就加上this.function();去从新请求下方法以改变参数最新值

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值