vue中怎么区分不同的环境

vue中怎么区分不同的环境

目录

如何区分不同环境

方式一、手动修改不同的变量

方式二、使用process.env.NODE_ENV来区分

方式三、编写不同的环境变量配置文件

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"   },

以上为个人经验,希望能给大家一个参考,也希望大家多多支持易知道(ezd.cc)。 

推荐阅读

    学习写字楼新选择6000元主流配置

    学习写字楼新选择6000元主流配置,,这种配置需要考虑双核心的办公和娱乐平台,充分考虑办公室的办公需求和娱乐需求,以约6000元的预算和cost-e

    酷睿I7 配置

    酷睿I7 配置,配置,玩家国度啦华硕 Rampage II Extreme(3800元)如果米不够,也可以把Extreme改为Gene,不过是小板内存推荐金士顿6G DDR3 2000骇

    提高3A四核羿龙II游戏配置的性能

    提高3A四核羿龙II游戏配置的性能,,以节能环保为主题的IT产业,目前3A低端平台处理器、主板芯片组、独立开发卡性能突出,特别是在与AMD的处理

    opporeno8参数配置及价格

    opporeno8参数配置及价格,面部,亿元,Oppo的荣誉2020年1月4日,接近屏幕关闭传感器是否支持双卡:支持oppor11splus什么时候上市的Oppo R11S P

    wps如何修改页眉上边距

    wps如何修改页眉上边距,WPS教程,1.WPS版word怎样设置页眉边距WPS中word设置页眉边距技巧“页边距”:页面上打印区域之外的空白空间。1、设

    查看配置:酷睿i3530集展示办公平台

    查看配置:酷睿i3530集展示办公平台,,由于时间和精力的关系,我们不可能对所有的配置进行评论,希望我们能理解,我希望我们的评论能在那些需要帮

    3500元超额值学生娱乐结构的优化配置

    3500元超额值学生娱乐结构的优化配置,,作为一个DIY的主流用户领域的学生,每个用户51学生攒机的高峰。因为学生用户没有稳定的收入来源,攒机