Vue打包后生成一个可修改接口地址的配置文件

先给几个参考：

vue2.0中实现打包后可配置接口地址

webpack 打包vue项目后生成一个可修改接口地址的配置文件

这个是vue3.0的(vue中实现打包后可配置接口地址)

感谢！！！

再来贴我自己的代码：

(普通版)第一步：在 static 静态文件中新建一个 serverconfig.js 文件，js 代码如下：

window.global_url = {
	Base_url: "https:www.rioyi.com:50000/inhouse" 
};

注意是src下面的static文件夹 不是打包后dist里面的！

vue-element-admin 在Public文件夹下面创建static文件夹，js代码跟上面一样

第二步：在 未打包的 index.html 中引入 static 文件夹下的 serverconfig.js 文件 （vue-element-admin：public/index.html）

<script src="./static/serverconfig.js"></script>

第三步：在需要的地方使用：(我是在单独的https里面或者main.js里面) （vue-element-admin：request.js中引入）

import axios from 'axios'
// 生成一个可以修改服务器地址的配置文件
var serverbaseUrl = window.global_url.Base_url;

console.log(serverbaseUrl, 'serverbaseUrl')
// 修改配置的地址
axios.defaults.baseURL = serverbaseUrl;
Vue.prototype.$ = $

Vue.prototype.$http = axios

// Vue.prototype.$message = Message
Vue.prototype.$echarts = echarts

// 挂载echarts水球图
// Vue.prototype.echartsliquidfill = echartsliquidfill

Vue.use(ElementUI);
// // 设置请求拦截器，为请求对象添加token，这是后续权限api要求的
// Vue.prototype.$http.interceptors.request.use(req => {
//   // req就是请求对象
//   // console.log(req)
//   // 基于请求拦截器显示响应进度条
//   NProgress.start();
//   // 为请求对象设置携带token的属性
//   req.headers.Authorization = sessionStorage.getItem('token');

//   // 最后必须返回req
//   return req;
// });

// // 设置响应拦截器
// Vue.prototype.$http.interceptors.response.use(
//   res => {
//     // 基于响应拦截器隐藏响应进度条
//     NProgress.done();
//     return res;
//   },
//   err => {
//     // 当服务器离线无法登录，给一下提示信息
//     Vue.prototype.$message.error('服务器网络错误！');
//     console.log('服务器网络错误！');
//     return Promise.reject(err);
//   }
// );

Vue.config.productionTip = false

第四步：打包生成

在我们打包之后 可以看到 config 文件会原样输出并没有被打包，部署人员可以直接通过该文件来修改config.js里面的接口地址就可以啦！