vue 项目中如何动态配合API请求地址

最新推荐文章于 2024-05-07 16:51:53 发布

李树模

最新推荐文章于 2024-05-07 16:51:53 发布

阅读量2.5k

点赞数

文章标签： vue.js javascript 前端 webpack Powered by 金山文档

本文链接：https://blog.csdn.net/lk_csdn666/article/details/128957724

版权

背景：常规的vue项目分为本地开发环境和生产环境，在实际项目中，我们在打包之前在.env文件中进行地址配置然后进行打包（vue.config.js文件在开发环境中有效，打包后无效），但在部署过程中地址是不固定的，那么就需要进行动态配置，而不是每次都重新构建代码。

① 在static文件中创建一个config.js的文件（static目录不会被webpack打包，所以可以直接配置使用）

var ipConfig = {
  AXIOS_TIMEOUT: 10000,
  BASE_URL: "http://192.168.1.177:8083",//配置服务器IP及端口
}

② 在public下index.html中引入config.js文件

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <script type="text/javascript" src="/static/config.js"></script>
  </body>
</html>
<style>
  body{margin: 0px}
</style>

注意：需注意引入的位置需在<html><html/>中，否则打包发布后，依旧无法通过修改配置文件更新接口地址

③ 在接口拦截器那边去设置和使用ip及端口地址

import {Message} from 'element-ui'
import router from './index'
import stroe from '../API/stroe/index'let axios = require('axios')

axios.defaults.baseURL = window.ipConfig.BASE_URL//'http://192.168.1.177:8083/'
// 开启认证
axios.defaults.withCredentials = true

参考链接：https://huaweicloud.csdn.net/63a55ea7b878a5454594561c.html?spm=1001.2101.3001.6661.1&utm_medium=distribute.pc_relevant_t0.none-task-blog-2~default~BlogCommendFromBaidu~activity-1-121029695-blog-103850878.pc_relevant_vip_default&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2~default~BlogCommendFromBaidu~activity-1-121029695-blog-103850878.pc_relevant_vip_default&utm_relevant_index=1