gpt4 book ai didi

vue中如何区分不同的环境

转载 作者:知者 更新时间:2024-03-13 05:52:06 26 4
gpt4 key购买 nike

我们在vue开发中常常要根据不同的环境区分不同的变量,常见的环境有如下几种:
生产环境:production,
开发环境:development,
测试环境:test
方式一、手动修改不同的变量

const BASE_URL = 'http://dlfordmc.org/dev'
const BASE_NAME = 'coder'

// const BASE_URL = 'http://dlfordmc.org/prod'
// const BASE_NAME = 'kobe'

// const BASE_URL = 'http://dlfordmc.org/test'
// const BASE_NAME = 'james'

export { BASE_URL, BASE_NAME }

我们当处于什么环境下,就将什么变量的注释取消。这样做太过于繁琐,并且也不安全。如果我们忘记,当处于生产环境下的,我们使用的是开发环境下的变量,此时就会造成不安全。
方式二、使用process.env.NODE_ENV来区分

let BASE_URL = ''
let BASE_NAME = ''

if (process.env.NODE_ENV === 'production') {
  BASE_URL = 'http://dlfordmc.org/prod'
  BASE_NAME = 'dmc'
} else if (process.env.NODE_ENV === 'development') {
  BASE_URL = 'http://dlfordmc.org/deve'
  BASE_NAME = 'dl'
} else {
  BASE_URL = 'http://dlfordmc.org/test'
  BASE_NAME = 'dlfordmc'
}

export { BASE_NAME, BASE_URL }

方式三、编写不同的环境变量配置文件
需要在根目录下编写三个文件:
.env.development

VUE_APP_BASE_URL=https://fordmcdl.org/devepment
VUE_APP_BASE_NAME=devepmemt

.env.production

VUE_APP_BASE_URL=https://fordmcdl.org/production
VUE_APP_BASE_NAME=production

.env.test

VUE_APP_BASE_URL=https://fordmcdl.org/test
VUE_APP_BASE_NAME=test

此时在其他地方访问的时候

console.log(process.env.VUE_APP_BASE_URL)   //https://fordmcdl.org/devepment
      console.log(process.env.VUE_APP_BASE_NAME)  //devepmemt

注意:此时必须要加上VUE_APP,访问的时候需要加上process.env

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com