vue3.0创建环境变量

版权声明：未经本人同意不得私自转载 https://blog.csdn.net/qq_40190624/article/details/83617151

需求: 一个地址在开发环境和上线环境的地址不一样,

文件浏览:

env和env.development文件如果发生了变化的话都需要重启项目;不然页面不会有改变

在src同级的目录下他创建一个.env文件(也就是环境变量的意思此文件为生产环境下)去里面定义 一个我们所需要的环境变量;创建后需要重启项目;

VUE_APP_URL=https://api.com

//VUE_APP是固定写法,后面的URL为自定义

在页面中如果要引用

<template>
  <div class="hello">
  
      <p>{{URL}}</p>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      url:process.env.VUE_APP_URL
    }
  },
 
}
</script>

如果是开发环境再创建一个同级的文件 .env.development(为开发环境下使用)

VUE_APP_URL=https://dev.api.com

//VUE_APP是固定写法,后面的URL为自定义

完成后他会随着你的开发环境变化而变化;不需要你去手动在vue里面去修改

---

还有一种就是不用env文件当默认的生产环境

我们可以再在同级文件下创建.env.production 文件(此文件代表生产环境)

在.env.production文件中写入你需要的地址如:

VUE_APP_URL=https://api.com

//VUE_APP是固定写法,后面的URL为自定义,如果你这里的VUE_APP不是写的固定的他会自动找到env去执行

写完后在运行前还是要重启项目