Vue配置生产环境和测试环境的参数，.env.production、.env.development怎么用？

你挚爱的强哥

已于 2024-05-21 09:52:50 修改

阅读量3.8k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： Vue.js 文章标签： vue.js 前端 javascript

于 2022-07-30 14:31:55 首次发布

随意拷贝莫问题，但是有一点！请务必备注“你挚爱的强哥出品~么么哒”！

本文链接：https://blog.csdn.net/qq_37860634/article/details/126071549

Vue.js 专栏收录该内容

304 篇文章

订阅专栏

本文介绍了如何在Vue.js项目中配置.env文件，包括.env、.env.development和.env.production，分别用于本地开发、测试和生产环境。通过package.json中的scripts指令指定环境，并在代码中打印和使用这些环境变量，确保不同环境下应用行为的正确性。

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

在项目根目录新建3个文件分别为.env、.env.production、.env.development文件：

.env 无论什么环境都会加载(一般用于本地开发)
.env.development 测试开发环境加载
.env.production 生产环境加载

我们下面的例子分开来写只用.env、.env.production、.env.development。

.env文件

NODE_ENV = local
VUE_APP_URL = 'http://127.0.0.1/api' //自定义变量  必须要以VUE_APP_开头定义

.env.development文件

NODE_ENV = development  
VUE_APP_URL = 'http://alpha-test.shuzhiqiang.com/api' //自定义变量  必须要以VUE_APP_开头定义

.env.production文件

NODE_ENV = production    
VUE_APP_URL = 'http://prod.shuzhiqiang.com/api' //自定义变量  必须要以VUE_APP_开头定义

然后配置package.json

{
  "name": "你挚爱的强哥",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",

    //【测试环境】
    //--mode 后面需要对用文件的名字.env.development  重点是要和.env.后面的名字对应起来
    "build-development": "vue-cli-service build --mode development",

    //【生产环境】
    //--mode 后面需要对用文件的名字.env.production 重点是要和.env.后面的名字对应起来
    "build-production": "vue-cli-service build --mode production",

    "lint": "vue-cli-service lint"
  },
  ...
}

接下来，我们在app.vue中打印一下我们设置的这个VUE_APP_URL

  //注意：一定要在mounted里面才能打印出来，毕竟.env是外部配置文件，加载需要时间的~
  mounted() {
    console.log(process.env,'环境变量全局')
    console.log(process.env.VUE_APP_URL, "生产环境VUE_APP_URL");
  }

如果是vue3需要这样打印环境变量

<script setup>
import { onMounted } from 'vue';
 
onMounted(() => {
  // 打印所有环境变量
  console.log(import.meta.env);
 
  // 打印 自定义 变量
  console.log('NODE_ENV:', import.meta.env.自定义变量名);
 
});
</script>