vue环境变量配置——process.env（详细）
在用vue框架时，经常用到两种环境，一种是开发环境，就是本地开发时的环境，一种是生产环境，就是要发布到线上的环境。
平时开发是用生产环境的，如果发布到线上时，需要切换环境为线上。如果人为去切换也是可以的，但是会容易忘记，可以通过配置不同的运行命令来自动切换环境。
下面开始：
配置环境的实现原理
实现原理就是采用node.js顶层对象中的process.env（进程环境，返回一个包含用户环境信息的对象）属性，根据各个环境的配置文件区分和切换环境
具体实例
1. 安装依赖
npm install process
2.创建.env.dev 和.env.prod两个文件
注意文件要创建在根目录下面
.env.dev文件内容如下：
NODE_ENV = 'development'
VUE_APP_TITLE = 'development'
/* 请求接口地址 */
VUE_APP_INTERFACE_URL="https://xxx"
/* proxy代理地址 */
VUE_APP_PROXYURL='http://xxx'
.env.prod文件内容如下：
NODE_ENV='production'
VUE_APP_TITLE='prod'
/* 请求接口地址 */
VUE_APP_INTERFACE="https://xxx"
3.设置项目启动时默认的环境
只需要在项目启动命令后面修改需要的环境就行了，例如npm run dev，把--mode dev改为--mode prod就变成了开发环境
package.json部分内容如下：
"scripts":{"dev":"vue-cli-service serve --mode dev","prod":"vue-cli-service serve --mode prod"
}
4.查看环境是否配置成功
在main.js文件中打印当前环境，输出就成功了
console.log(process.env.NODE_ENV)
vue环境变量配置——process.env（详细）相关推荐
- Java新手小白入门篇 JDK安装及环境变量配置（超详细）
前言 学习Java,必备的就是JDK,所以我们必须得下载安装JDK,才能学习Java,下面我们会介绍 JDK是什么,如何安装并配置. 一.JDK简介 1.名词解释 JVM (Java Virtual ...
- maven环境变量配置（超详细！）
下载地址: 官网地址 建议不要下载在C盘!! 配置过程 1.解压下载好的压缩包 2.此电脑–右键–属性–高级系统设置–环境变量 3.新建一个系统变量(点击系统变量的新建) 变量名:MAVEN_HOME ...
- javaJDK下载安装步骤及环境变量配置【超详细】
在学习java的时候需要安装JDK,配置好环境变量才能进行学习,下面是下载和安装JDK步骤和环境变量的配置. 一.JDK下载 1.JDK下载地址: https://www.oracle.com/jav ...
- javaee安装_JDK下载安装与环境变量配置【超详细】
01 JDK介绍 JDK是一种用于构建在Java平台上发布的应用程序的开发环境,即编写Java程序必须使用JDK,它提供了编译和运行Java程序的环境. 02 版本介绍 1 SE(JavaSE),st ...
- linux下载软件后环境变量配置（最详细的保姆教程）——怎么找到linux下文件的路径
注意一下操作必须按顺序,如果不按顺序出错概不负责 1.安装好软件 2.进入软件所在的bin文件夹 3.鼠标右键有一个在终端打开 4.键入pwd出现路径 5.复制整个路径 6.终端键入vim ~/.ba ...
- Ubuntu零基础教学-Ubuntu20.04安装jdk1.8及环境变量配置【超级详细】
- vue运行命令以及环境变量配置
配置打包命令以及打包环境变量: 在package.json文件中配置:"scripts": {"serve": "vue-cli-service se ...
- Windows环境下JDK安装与环境变量配置详细的图文教程
本节内容:JDK安装与环境变量配置 以下是详细步骤 回到顶部 一.准备工具: 1.JDK JDK 可以到官网下载 http://www.oracle.com/technetwork/java/java ...
- process.env环境变量配置方式（配置环境变量区分开发环境和生产环境）
一.process.env 为何物? 言归正传. process.env 是 Node.js 中的一个环境变量.其中保存着系统的环境的变量信息.可使用 Node.js 命令行工具直接进行查看: 1.安 ...
最新文章
- Nginx-windows下nginx安装、配置与使用
- WD强势出击 推出全球业界首款2TB硬盘
- html的带分页的表格写法,Html表格分页
- html页面js遍历listview,javascript实现的listview效果
- 学计算机之路写一篇作文,写我的学艺之路作文
- leetcode @python 124. Binary Tree Maximum Path Sum
- 15行代码抓取兰亭序全文单字高清字帖
- linux mongo 搭建+集群
- Latex：图片排版的位置参数【htbp】
- 如何编写单元测试用例
- 郑州市暂住证（居住证）、迁户口办理-2018年
- 又读《孙子兵法》，谈领导力
- 怎么免费获取帆软9.0激活码，帆软8.0激活码，如何激活
- android 读写sd文件系统,SD卡FAT16文件系统的学习笔记
- 被踢出局！贾跃亭真栽了
- html十六进制和RGB颜色表
- C# WPF 基于Socket的企业聊天软件IM(源码)
- oracle中sql查询增加自增序列号
- 876计算机大纲,2018华中科技大学876 物理化学二考试大纲
- 读《移山之道》——问渠哪得清如许，为有源头活水来