大佬教程收集整理的这篇文章主要介绍了vue-cli3/4关于process.env的配置，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
由于我们的项目需要在不同环境下进行运行(开发，生产，测试等)，设置process.env这避免我们需要多次的去切换请求的地址以及相关的配置。
默认的有development和production两种，分别对应运行运行vue-cli-service serve与vue-cli-service build两种环境。也就是说开发环境默认为development，打包之后的环境默认为production。同时也支持不同环境不同配置，在项目根目录中配置.env.development与.env.production两个文件（使用方法与.env一致），系统根据不同环境获取不同配置文件。达到不同环境不同配置的效果。然而实际开发中，我们不一定只有两个环境，所以vue-cli也提供了多环境的配置方法。在系统根目录中配置.env.[environmentName]文件，然后运行时候加上–mode environmentName就可以将配置文件切换到对应文件中去
一 建立.env系列文件
首先我们在根目录新建3个文件，分别为.env.development，.env.production，.env.test
二 修改.env系列文件
.env.development
VUE_APP_BASE_API = 'http://localhost:8091/api/'
.env.production
.env.test
VUE_APP_BASE_API = 'http://192.169.123:8092/api/'
四 更改package.json文件
"scripts": { "dev": "vue-cli-service serve", "test": "vue-cli-service serve --mode test", "serve": "vue-cli-service serve", "build": "vue-cli-service build", "build:test": "vue-cli-service build --mode test", "lint": "vue-cli-service lint" }
五 使用
当需要用到该变量是可以用process.env.VUE_APP_BASE_API进行取值。
例如在js文件中直接使用
1.Vue2.0页面写法
在data中使用
<template>
<div>
<a :href="thiS.UploadUrl">点击</a>
</div>
</template>
<script>
export default {
data() {
return {
uploadUrl: process.env.VUE_APP_BASE_API,
}
}
}
</script>
在computed() 中使用
<template>
<div>
<a :href="VUE_APP_BASE_API">点击</a>
</div>
</template>
<script>
export default {
computed: {
VUE_APP_BASE_API(){
return process.env.VUE_APP_BASE_API
}
}
}
</script>
2. Vue3.0页面写法
在setup()引用
<template>
<div>
<a :href="uploadUrl">点击</a>
</div>
</template>
<script>
export default {
setup() {
return {
uploadUrl:'process.env.VUE_APP_BASE_API'
}
}
}
</script>
在computed()中使用
<template>
<div>
<a :href="VUE_APP_BASE_API">点击</a>
</div>
</template>
<script>
import { computed } from 'vue'
export default {
setup() {
const VUE_APP_BASE_API = computed(()=>{
return process.env.VUE_APP_BASE_API
})
return {
VUE_APP_BASE_API
}
}
}
</script>
以上是大佬教程为你收集整理的vue-cli3/4关于process.env的配置全部内容，希望文章能够帮你解决vue-cli3/4关于process.env的配置所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。