Vue3+Vite配置环境变量模式切换开发与生产环境的接口域名

最新推荐文章于 2024-08-25 11:06:06 发布

路光.

最新推荐文章于 2024-08-25 11:06:06 发布

阅读量1.4k

点赞数 2

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_41429765/article/details/131502537

版权

文章讲述了如何在Vue项目中使用.venv文件来设置开发和生产环境的API域名。通过VITE_APP_TITLE环境变量，axios实例根据不同的环境加载相应的接口地址，并在请求和响应拦截器中处理token。Vitebuild打包时会依据.env.production文件。

摘要由CSDN通过智能技术生成

.env.development

# .env.production
VITE_APP_TITLE='http://172.16.1.115:8096'

.env.production

# .env.production
VITE_APP_TITLE='https://172.16.1.119:8097'

在接口文件中使用配置的地址

import Axios from 'axios'
const instance=Axios.create({
    baseURL:import.meta.env.VITE_APP_TITLE, //引入环境变量中定义的接口地址
    timeout:5000
});
instance.interceptors.request.use((config)=>{
    let token=window.sessionStorage.getItem('token')
    if(token){
        config.headers.token=token;
    }
    return config;
})
instance.interceptors.response.use(response=>{
    let token=response.data.data.token;
    if(token){
        window.sessionStorage.setItem('token',token)
    }
    return response;
})
export default instance