vue config 接口地址配置

vue config 接口地址配置

在Vue项目中,通常会有一个配置文件来设置不同环境下的接口地址。这样做可以方便地在开发、测试和生产环境之间切换时更改接口地址。

以下是一个使用Vue CLI创建的项目中的vue.config.js文件的示例,演示了如何配置API接口地址:

复制代码
// vue.config.js
 
module.exports = {
  // ... 其他配置 ...
 
  // 环境变量
  devServer: {
    // 可以通过 --mode 选项指定不同的运行模式
    // 例如:npm run serve -- --mode development
    // 或者:npm run build -- --mode production
    // 在这里可以根据不同的模式设置不同的环境变量
    env: {
     development: {
        API_URL: 'http://localhost:3000'
      },
     production: {
        API_URL: 'https://api.example.com'
      }
    },
    // ... 其他devServer配置 ...
  },
 
  // 通过definePlugin传递环境变量给打包的代码
  configureWebpack: {
    plugins: [
      new webpack.DefinePlugin({
        'process.env': require('../env').stringified
      })
    ]
  }
};

env.js文件中,你可以这样配置环境变量:

复制代码
// env.js
 
const env = process.env.NODE_ENV || 'development';
 
const config = {
  development: {
    API_URL: 'http://localhost:3000'
  },
  production: {
    API_URL: 'https://api.example.com'
  }
};
 
const envConfig = config[env] || config.development;
 
// 需要导出的是字符串化的配置
const stringified = {
  'process.env': {
    API_URL: JSON.stringify(envConfig.API_URL)
  }
};
 
module.exports = {
  stringified
};

在应用代码中,你可以使用process.env.API_URL来访问配置的接口地址:

复制代码
// 示例:axios配置API接口地址
import axios from 'axios';
 
const apiClient = axios.create({
  baseURL: process.env.API_URL
});
 
// 使用apiClient进行API请求
相关推荐
fruge20 小时前
2025前端工程化与性能优化实战指南:从构建到监控的全链路方案
前端·性能优化
aesthetician21 小时前
Node.js v25 重磅发布!革新与飞跃:深入探索 JavaScript 运行时的未来
javascript·node.js·vim
知识分享小能手1 天前
uni-app 入门学习教程,从入门到精通,uni-app基础扩展 —— 详细知识点与案例(3)
vue.js·学习·ui·微信小程序·小程序·uni-app·编程
demi_meng1 天前
reactNative 遇到的问题记录
javascript·react native·react.js
MC丶科1 天前
【SpringBoot 快速上手实战系列】5 分钟用 Spring Boot 搭建一个用户管理系统(含前后端分离)!新手也能一次跑通!
java·vue.js·spring boot·后端
千码君20161 天前
React Native:从react的解构看编程众多语言中的解构
java·javascript·python·react native·react.js·解包·解构
lijun_xiao20091 天前
前端最新Vue2+Vue3基础入门到实战项目全套教程
前端
90后的晨仔1 天前
Pinia 状态管理原理与实战全解析
前端·vue.js
杰克尼1 天前
JavaWeb_p165部门管理
java·开发语言·前端
EndingCoder1 天前
WebSocket实时通信:Socket.io
服务器·javascript·网络·websocket·网络协议·node.js