需求:每次修改程序会很麻烦,需要我们在打包的时候生成配置文件,直接修改文件就可以改变端口。
1.首先在打包的目录static下创建config.js文件(关于axios的开头通过js设置)
在这里插入图片描述
2.config.js文件内容(加双引号)

window.g = {
  BASE_URL: "http://*******"
  // BASE_URL: "http://*********"
}

3.还在此目录下的index.html引用config.js
在这里插入图片描述
在这里插入图片描述
但是我是在项目的更目录加的 打包完之后这里也会出现引用的
在这里插入图片描述
在这里插入图片描述
4.定义全局变量global.js
在这里插入图片描述

// 配置全局生产环境变量
let baseUrl = window.g.BASE_URL
export default {
  baseUrl
}

5.在main.js中引用

// 引入全局定义数据
import global_ from './global.js'
Vue.prototype.GLOBAL = global_
Axios.defaults.baseURL = global_.baseUrl //定义axios的接口前缀 新增

6.应用
在这里插入图片描述
7.打包后就可以读取了

二、js定义全局变量并调用(打包后的js可修改)
1.执行“一”的1、2、3的步骤,需要注意在第2步时:在js中写的变量如果还使用window.g,需要将g改成别的名字。
在这里插入图片描述
2.执行“一”的第4的步骤

var staUrl = window.c.STA_URL
var monUrl = window.c.MON_URL
export default {
  staUrl,
  monUrl
}

3.在main.js中引用
使用 Vue.prototype,通过在 vue 的原型上定义属性,可以在所有组件中访问该属性

// 引入全局定义数据
import global_ from './global.js'
Vue.prototype.GLOBAL = global_

Vue.prototype.$staVar = global_.staUrl;
Vue.prototype.$monVar = global_.monUrl;

4.应用
在这里插入图片描述

<template>
  <div>
    {{this.$staVar}}
  </div>
</template>

二、动态访问端口地址
config.js文件

window.g = {
    BASE_URL: "http://123.12.12.23:9090" 
    // BASE_URL: "http://123.12.12.23:9090" //写死的
    // BASE_URL: window.location.href //完整地址,http://123.12.12.23:8080/#/
    // BASE_URL: window.location.host //地址加端口号,123.12.12.23:8080
    // BASE_URL: window.location.hostname //端口号,123.12.12.23
    // BASE_URL: window.location.protocol //只输出头,http:
    
    // BASE_URL: window.location.host.substring(0,window.location.host.lastIndexOf(":")) // 123.12.12.23  截取从0开始到从后数第一个冒号的位数
    // BASE_URL: "http://"+window.location.host.substring(0,window.location.host.indexOf(":")+1)+"9090"  //http://123.12.12.23:9090  +1是冒号前一位
    // BASE_URL: "http://"+window.location.host.substring(0,window.location.host.indexOf(":"))+"9090"  //http://123.12.12.239090    不加1是把冒号直接删掉
  }

按自己的需求来改变地址显示的方式

Logo

前往低代码交流专区

更多推荐