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

  • 相关阅读:
    Luogu P2633 Count on a tree
    Luogu P4011 孤岛营救问题
    Luogu P3157 [CQOI2011]动态逆序对
    SCOI2015 国旗计划
    AT2165 Median Pyramid Hard
    BZOJ2959 长跑
    SCOI2015 情报传递
    SDOI2011 染色
    SCOI2010 幸运数字
    SHOI2016 黑暗前的幻想乡
  • 原文地址:https://www.cnblogs.com/0520euv/p/15349379.html
Copyright © 2011-2022 走看看