vue打包怎么在外部配置文件（端口），并可以动态访问端口地址（输入什么就访问什么）

需求：每次修改程序会很麻烦，需要我们在打包的时候生成配置文件，直接修改文件就可以改变端口。
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是把冒号直接删掉
  }

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