别在js中写后台地址了,用好React/Vue脚手架的环境变量

更新日期: 2020-03-28阅读: 2.2k标签: 脚手架

背景

前端开发都少不了对后台的调用,后台地址配置在哪里,是一个很纠结的问题 为此大家开动脑筋,想了不少办法:

代码中定义一个常量如baseUrl,后台请求时,统一拼上这个baseUrl; 问题:本地、开发、测试、生产环境地址不一样,得反复改地址;

前端与后台代码部署在一个域下,使用相对路径访问后台; 问题:开发阶段本地调试的时候,还是避免不了要用方案一来配置一个baseUrl,且这个改动与代码放在一起,一不小心就提交到代码库,CI打出来的包就不对了。


解决方案

只要是通过reactvue脚手架创建的项目,都支持配置环境变量,使用方式:

定义环境变量

#React项目.env文件
REACT_APP_BASEURL=https://prod.utcook.com

#Vue项目.env文件
VUE_APP_BASEURL=https://prod.utcook.com

在代码中使用

import axios from 'axios';
const baseUrl = process.env.REACT_APP_BASEURL;
axios.get("${baseUrl}/api/user/list");

本地调试时,后台地址不一样怎么办?

有两种方式可以定义本地地址:

1. 通过.env.local文件:
#React项目.env.local文件
REACT_APP_BASEURL=http://192.168.1.123:8080

#Vue项目.env.local文件
VUE_APP_BASEURL=http://192.168.1.123:8080

2. 通过环境变量覆盖

WebStorm可以直接在"Run/Debug Configurations"->Enviroment里面指定

其它IDE也可以通过Windows或Linux的系统环境变量来指定

有多套环境怎么办?

React和Vue脚手架支持同样的mode机制:
.env                # 在所有的环境中被载入
.env.local          # 在所有的环境中被载入,但会被 git 忽略
.env.[mode]         # 只在指定的模式中被载入
.env.[mode].local   # 只在指定的模式中被载入,但会被 git 忽略
# 优先级越往下越高

mode与npm脚本的对应规则:

npm run build默认production模式(.env.production)

npm run start或npm run serve默认development模式(.env.development)

npm run test默认test模式(.env.test)

React和Vue的脚手架,同样都为我们设计好了git的忽略规则:
# React脚手架生成的.gitignore
.env.local
.env.development.local
.env.test.local
.env.production.local

# Vue脚手架生成的.gitignore
# local env files
.env.local
.env.*.local

我们可以在.env中配置所有变量的默认值,在对应mode的配置文件中配置不同环境的变量;

如果有开发、测试、生产多套环境,可以在对应的CI脚本里面配置环境变量去覆盖;

更多信息,请参考本文档最后的链接。


链接: https://fly63.com/article/detial/9198

使用 Node.js 开发简单的脚手架工具

像我们熟悉的 vue-cli,react-native-cli 等脚手架,只需要输入简单的命令 vue init webpack project,即可快速帮我们生成一个初始项目。在实际工作中,我们可以定制一个属于自己的脚手架,来提高自己的工作效率。

nodejs脚手架express-generator

安装生成器npm install express-generator -g,创建名称为APP的应用,在浏览器中使用 localhost:3000访问。注:该模板默认用的是 .jade 文件作为模板渲染 若要使用 ejs 可按照一下方法配置

如何快速开发一个自己的项目脚手架?

本文通过一个简单的例子来告诉大家如何使用 Yeoman 快速创建脚手架。要了解更多 yeoman-generator 的开发与使用,可以参考社区里大家写的各类 generator。目前在 npm 上有超过 8000 个 yeoman-generator,也许就会有你的菜。

前端脚手架构建实践

在前端工程化过程中,为了解决多项目中,相似度高的工作,便诞生许多前端脚手架,这里记录下自己实现一个简易前端脚手架过程的实践。主要是解决多个页面相似内容的复制粘贴问题

如何撸一个前端脚手架

vue-cli, create-react-app、react-native-cli 等都是非常优秀的脚手架,通过脚手架,我们可以快速初始化一个项目,无需自己从零开始一步步配置,有效提升开发体验。尽管这些脚手架非常优秀,但是未必是符合我们的实际应用的

手把手教你搭建脚手架工具 - (commander)

commander在Vue-cli、creat-app(react)中都起到了很大的作用,这种创建脚手架的方式与vue-cli的方式不同,vue-cli则是使用git远程拉取项目再完成初始化,这样一来要比这种更加的方便灵活,每次模板变更不需要再次上传包

前端脚手架的那些事儿

NodeJs的出现,让前端工程化的理念不断深入,正在向正规军靠近。先是带来了Gulp、Webpack等强大的构建工具,随后又出现了vue-cli和create-react-app等完善的脚手架,提供了完整的项目架构

vue脚手架写法

一直想建一个自己公司自用的脚手架,可以方便的快速开发。于是开始看vue-cli的源码和一些网上的教程。发现,一款脚手架其实很简单,主要原理就是从远程下载一个模板来新建一个项目。同时提供了一系列的交互来动态的更改模板。

前端使用脚手架的作用

脚手架在前端工作流中负责项目起始阶段创建初始文件。与其他功能模块不同的是,脚手架是一个完全“启下”的模块,它没有任何前置依赖。创建完成项目初始文件之后,脚手架就再无用武之地了。

基于vue脚手架构建库并发布到npm

构建库的常见方法有两种:一种是自己手动构建webpack库打包,设置output为 library; 另一种是基于vue-cli3输出库资源包。我们采用第二种vue脚手架的方式构建库。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!