zoukankan      html  css  js  c++  java
  • VUE2.0项目实现动态修改请求的服务器地址

    最近需求: 要求可以动态修改请求baseURL。

    1、安装插件 npm install --save-dev generate-asset-webpack-plugin

    2、修改 vue.config.js

    module.exports = {
      configureWebpack:{
    const GenerateAssetPlugin = require('generate-asset-webpack-plugin');
    const cfgJson = require('./serverconfig.json') //这里引入的地址就是后面新建serverconfig.json的地址
    var createServerConfig = function (compilation) {
      return JSON.stringify(cfgJson);
    }
    
    chainWebpack(config){
          config
          .plugin('GenerateAssetPlugin')
          .use('generate-asset-webpack-plugin', [{
            filename: 'serverconfig.json',
            fn: (compilation, cb) => {
              cb(null, createServerConfig(compilation));
            },
            extraFiles: []
          }])
    }
        }
    }
    
    

    3、在main.js

    
    Vue.prototype.getConfigJson = function () {
      axios.get("serverconfig.json").then((result) => {
        localStorage.setItem('ApiUrl',result.data.VUE_APP_SERVE_URL);
      }).catch((error) => {
        console.log('getConfigJson Error!', error)
      })
    }
    

    4、在app.vue

      mounted () {
        this.getConfigJson();
      },
    

    5、修改Axios的BaseURL地址。

    const service = axios.create({
      // baseURL: process.env.VUE_APP_BASE_API, 
      baseURL:  process.env.NODE_ENV === 'development' ? process.env.VUE_APP_BASE_API : localStorage.getItem('ApiUrl'),
      timeout: 5000, // request timeout
      headers: { language: getLocalLang() }
      // headers:{"Content-Type":"application/x-www-form-urlencoded; charset=UTF-8"}// qs序列号需要携带头部
    })
    

    7、 新建JSON文件serverconfig.json ,不然打包后报错

    {"VUE_APP_SERVE_URL":"http://210.132.158.3:1000/api"}
    

    7、在每次 npm run build 打包的时候, 修改dist文件夹中的 serverconfig.json 中的地址即可

    一些小玩意

    https://www.jianshu.com/p/3f0b7ea9df53

    本文来自博客园,作者:云霄紫潭,转载请注明原文链接:https://www.cnblogs.com/0520euv/p/15349379.html

  • 相关阅读:
    Redis21:客户端与服务器端的通信与redis管道
    Redis20:keys、scan、bigkeys、查看key的存储方式
    Redis19:限流
    Redis18:分布式锁
    Redis17:cluster集群
    Redis16:两种redis集群解决方案:codis和cluster
    Android : 获取声卡信息的测试代码
    Android : 基于alsa库的音乐播放
    Android system :灯光系统_HAL_lights
    Android system :led_class驱动
  • 原文地址:https://www.cnblogs.com/0520euv/p/15349379.html
Copyright © 2011-2022 走看看