vue中怎么区分不同的环境
更新时间：2022年04月18日 11:14:57 作者：卖菜的小白
这篇文章主要介绍了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/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
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"
},以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vue2.x-使用防抖以及节流的示例，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下2021-03-03
这篇文章主要介绍了vue中实现路由跳转的三种方式超详细教程，其中声明式router-link实现跳转最简单的方法，可用组件router-link来替代a标签，每种方式给大家讲解的非常详细需要的朋友可以参考下2022-11-11
实践中，我们会经常用到 ES2015 的参数解构来简化代码（特别是我们需要调用commit很多次的时候，{commit} 写法是解构后得到的，这篇文章主要介绍了Vuex Action的{ commit }的写法,需要的朋友可以参考下2023-10-10
Vue.js 是一款流行的前端框架,它提供了一些方便的机制来管理组件之间的通信,其中包括组件传值,本文将详细介绍 Vue.js 中的组件传值机制,包括父子组件传值、兄弟组件传值、跨级组件传值等多种方式,需要的朋友可以参考下2023-08-08
这篇文章主要介绍了vue 监听窗口变化对页面部分元素重新渲染操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
表单联动和级联选择是Vue.js中常见的功能，在下面的文章中，我们将讨论如何在Vue.js中实现表单联动和级联选择，感兴趣的小伙伴可以了解一下2023-06-06
这篇文章主要介绍了Vue项目中引入 ECharts，ECharts是一个强大的画图插件，在vue项目中，我们常常可以引用Echarts来完成完成一些图表的绘制；以下介绍vue项目中引用并使用ECharts，具有一定的参考价值，需要的小伙伴可以参考一下2021-12-12
懒加载简单来说就是延迟加载或按需加载，即在需要的时候的时候进行加载。这篇文章主要介绍了vue路由懒加载及组件懒加载 ,需要的朋友可以参考下2019-06-06
最近参与了公司一个新的B端项目的研发,从无到有搭建项目的过程中,遇到了关于项目鉴权的问题,这篇文章主要给大家介绍了关于如何使用Vuex实现Vue后台管理中的角色鉴权的相关资料,需要的朋友可以参考下2022-05-05
这篇文章主要给大家介绍了关于如何以拖拽方式生成Vue用户界面的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-04-04
最新评论