这篇文章主要介绍“vue中如何区分不同的环境”，在日常操作中，相信很多人在vue中如何区分不同的环境问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”vue中如何区分不同的环境”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
如何区分不同环境
我们在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/devepmentVUE_APP_BASE_NAME=devepmemt.env.production
VUE_APP_BASE_URL=https://fordmcdl.org/productionVUE_APP_BASE_NAME=production.env.test
VUE_APP_BASE_URL=https://fordmcdl.org/testVUE_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
vue配置不同环境
官网学习：https://cli.vuejs.org/zh/guide/mode-and-env.html#%E6%A8%A1%E5%BC%8F
假如项目有4个环境：开发、生产、测试、其他
需要配置以下文件
1.package.json
vue脚手架默认有2个环境，开发和生产，在本地环境开发，发布到生产环境，配置如下
"scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "start": "npm run dev", "lint": "eslint --ext .js,.vue src", "build": "node build/build.js" },如果变成4个环境，1个本地开发，3个可发布测试。
首先，我们需要想清楚，我们需要的是什么。
① 需要本地开发，打包到不同环境测试发布；
② 还是开发时就是不同环境，打包也是不同环境
如果是第一种
"scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "start": "npm run dev", "lint": "eslint --ext .js,.vue src", "build": "node build/build.js", //用这种 "build--dev": "cross-env NODE_ENV=production env_config=dev node build/build.js", "build--test": "cross-env NODE_ENV=production env_config=test node build/build.js", "build--prod": "cross-env NODE_ENV=production env_config=prod node build/build.js" //或用这种vue3.0 "build":"vue-cli-service build --mode development", "prodbuild":"vue-cli-service build --mode production", "testbuild":"vue-cli-service build --mode test" },如果是第二种
"scripts": { "serve": "vue-cli-service serve --mode development", "test": "vue-cli-service serve --mode test", "production": "vue-cli-service serve --mode production" , "build":"vue-cli-service build --mode development", "prodbuild":"vue-cli-service build --mode production", "testbuild":"vue-cli-service build --mode test" },到此，关于“vue中如何区分不同的环境”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！
