当前位置：首页 > news >正文

vue配置环境变量

news 2025/9/8 2:55:52

创建配置文件

.env.development 文件

.env.production 文件

.env.dev 文件

使用变量

配置 package.json 文件

例子：在 api.js 使用

可以继续添加

创建配置文件

在根目录与 package.json 同级创建文件 .env.development、 .env.production、.env.dev

文件	说明
.env.development	默认开发环境下的配置文件
.env.production	默认生产环境下的配置文件
.env.dev	自定义（本地测试用）

如果没有这些文件

那么运行 npm run serve 时，process.env.NODE_ENV 的值默认就是 development

运行 npm run build 时，process.env.NODE_ENV 的值默认就是 production

.env.development 文件

VUE_APP_URL = 'http://127.0.0.1:8081/api/'
VUE_APP_LOOK_URL = 'http://127.0.0.1:8082/api1/'

.env.production 文件

VUE_APP_URL = 'http://168.168.152.9:8081/api/'
VUE_APP_LOOK_URL = 'http://168.168.152.9:8082/api1/'

.env.dev 文件

NODE_ENV = 'production'
VUE_APP_URL = 'http://192.168.0.1:8081/api/'
VUE_APP_LOOK_URL = 'http://192.168.0.1:8082/api1/'

使用变量

配置 package.json 文件

{"name": "my_project","version": "0.1.0","private": true,"scripts": {"serve": "vue-cli-service serve", // 默认就是 development 开发环境"build": "vue-cli-service build", // 默认就是 production 开发环境"dev": "vue-cli-service build --mode dev" // 自定义配置 .env.dev},"dependencies": {"axios": "^1.2.1","core-js": "^3.8.3","element-ui": "^2.15.12","vue": "^2.6.14","vue-router": "^3.5.1"},"devDependencies": {"@vue/cli-plugin-babel": "~5.0.0","@vue/cli-plugin-router": "~5.0.0","@vue/cli-service": "~5.0.0","less": "^4.1.3","less-loader": "^11.1.0","vue-template-compiler": "^2.6.14"}
}

这边 --mode 后面的 dev 要对应 .env.dev 后面的 dev 命名；如果对应不上 vue-cli-service serve 就会默认 development；vue-cli-service build 就会默认 production

例子：在 api.js 使用

import Vue from 'vue'
import axios from 'axios'// 启动什么环境，就调用对应的配置变量
let url = process.env.VUE_APP_URL
Vue.prototype.$look_url = process.env.VUE_APP_LOOK_URLconst reqs = axios.create({baseURL: url,headers: { ['Content-Type']: 'application/x-www-form-urlencoded' }
})
// 请求拦截器
reqs.interceptors.request.use((req) => {return req},(err) => {return Promise.reject(err)}
)
// 响应拦截器
reqs.interceptors.response.use((res) => {return res},(err) => {return Promise.reject(err)}
)
export default reqs

可以继续添加

1、创建文件 .env.test

2、配置 package.json

3、在 hello.vue 文件调用

<template><div><h1>现在{{ msg }}环境</h1></div>
</template><script>
export default {data() {return {msg: process.env.NODE_ENV == 'development' ? '开发' : '生产'}},mounted() {if (process.env.NODE_ENV == 'development') {console.log('开发')} else if (process.env.NODE_ENV == 'production') {console.log('生产')} else if (process.env.NODE_ENV == 'test') {console.log('测试')}}
}
</script><style scoped>
</style>