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

最新推荐文章于 2026-04-23 10:52:52 发布

原创最新推荐文章于 2026-04-23 10:52:52 发布 · 2.1k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#vue.js #前端 #javascript

收录于

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

.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