vue 项目中如何动态配合API请求地址
vue 项目中如何动态配合API请求地址
·
背景:常规的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
更多推荐
已为社区贡献2条内容
所有评论(0)