vue配置环境变量，通过环境变量配置devServer.proxy和axios的baseURL

最新推荐文章于 2025-03-11 19:02:48 发布

不二臣_

最新推荐文章于 2025-03-11 19:02:48 发布

阅读量3.2k

点赞数

分类专栏： vue vue/cli webpack 文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_34458968/article/details/126783665

版权

vue 同时被 3 个专栏收录

11 篇文章

订阅专栏

vue/cli

5 篇文章

订阅专栏

webpack

2 篇文章

订阅专栏

本文介绍了Vue CLI项目的模式概念，重点讲解如何配置环境变量，特别是`.env.development`和`.env.production`文件。在开发环境中设置axios的基础URL与Vue CLI的devServer.proxy，以实现API请求的代理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

模式

模式是 Vue CLI 项目中一个重要的概念。默认情况下，一个 Vue CLI 项目有三个模式：

development 模式用于 vue-cli-service serve
test 模式用于 vue-cli-service test:unit
production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e

环境变量#

你可以在你的项目根目录中放置下列文件来指定环境变量：

.env                # 在所有的环境中被载入
.env.local          # 在所有的环境中被载入，但会被 git 忽略
.env.[mode]         # 只在指定的模式中被载入
.env.[mode].local   # 只在指定的模式中被载入，但会被 git 忽略

.env.development：开发环境下的配置文件
.env.production ：生产环境下的配置文件
如果没有配置这两个文件，运行 npm run serve 时，process.env.NODE_ENV 的值默认就是 development；运行 npm run build 时，process.env.NODE_ENV 的值默认是 production

"scripts": {
    "serve": "vue-cli-service serve",//development开发环境
    "build": "vue-cli-service build",//production生产环境
    "lint": "vue-cli-service lint"
 },

示例：

.env.development

NODE_ENV = 'development'

VUE_APP_BASE_API = 'http://xx.xxx.xxx.xx:xxx:xxxx/api'

VUE_APP_BASE_URL = 'http://xxx:xxxx'

VUE_APP_BASE_NAME = '/api'

vue.config.js

devServer: {
    // port: 6666,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    proxy: {
      [process.env.VUE_APP_BASE_NAME]: {
        target: process.env.VUE_APP_BASE_URL,//代理地址
        changeOrigin: true, // 是否跨域
        pathRewrite: {
          ['^'+process.env.VUE_APP_BASE_NAME]: ''
        }
      },
    }
  },

配置axios

const http = axios.create({
    withCredentials: true,// 指定某个请求应该发送凭据。允许客户端携带跨域cookie，也需要此配置
    baseURL: process.env.VUE_APP_BASE_URL, // 所有请求的公共地址部分
    timeout: 3000 // 请求超时时间 这里的意思是当请求时间超过5秒还未取得结果时 提示用户请求超时
})