目录
创建配置文件
在根目录与 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_URL
const 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>
注意：
自定义变量名必须以 VUE_APP_ 开头，例如：VUE_APP_URL、VUE_APP_TEST