react分环境打包配置

el/2024/4/13 13:46:50

create-react-app 2.0生成的项目分环境打包

最近做的项目需要准备三个环境,一个开发环境(development),一个演示环境(demo),一个正式环境(production),项目中不同的环境使用不同的页面title和favicon图标。
这个时候就需要根据不同的环境变量去加载不同的title和icon。首先我们需要安装dotenv-cli,运行命令

npm install dotenv-cli --save-dev

然后我们在项目的根目录创建 .env.development.env.demo.env.production 三个文件,文件内容是

// .env.development
REACT_APP_FAVICON=./development_favicon.png
REACT_APP_TITLE=[Dev]项目的title// .env.demo
REACT_APP_FAVICON=./demo_favicon.png
REACT_APP_TITLE=[Demo]项目的title// .env.production
REACT_APP_FAVICON=./production_favicon.png
REACT_APP_TITLE=项目的title

然后我们在项目的index.html中引入环境变量

<link rel="shortcut icon" href="%REACT_APP_FAVICON%" />
<title>%REACT_APP_TITLE%</title>

最后我们需要配置不同的打包命令

    "start": "node scripts/start.js","build": "node --max_old_space_size=4096 scripts/build.js","test": "node scripts/test.js","build:dev": "dotenv -e .env.development node --max_old_space_size=4096 scripts/build.js","build:prod": "dotenv -e .env.production node --max_old_space_size=4096 scripts/build.js","build:demo": "dotenv -e .env.demo node --max_old_space_size=4096 scripts/build.js"

增加build:devbuild:demobuild:prod三条命令,开发环境运行yarn build:dev,演示环境运行yarn build:demo、正式环境运行yarn build:prod,这样我们就能实现分环境打包了

react


http://www.ngui.cc/el/3419082.html

相关文章

uniapp实现多级菜单选择u-select

html <button v-for(item,index) in 5 :key"index" click"changeSelectClass(index)">选择菜单</button> //此组件可以根据children的深度自动增加子级菜单 <u-select click"show true" :default-value"defaultValue"…

uniapp返回上一页,触发上一页的刷新

在当前页触发上一页的run值更新 tapPre(){let pagesgetCurrentPages();//页面栈let prePagepages[pages.length-2]//上一页prePage.$vm.runMath.random();//触发上一页监听器uni.navgateBack();//返回上一页 }在上一页监听reFresh值变化了则触发执行 data(){return{run:} }, …

vue如何自定义修改网页title

document.titletitle名称 在vue中可以在前置守卫中修改或vue页created钩子中执行修改title

dotenv -e .env.development react-app-rewired build

> dotenv -e .env.development react-app-rewired build dotenv 不是内部或外部命令&#xff0c;也不是可运行的程序 或批处理文件。 npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! react-admin0.1.0 build:dev: dotenv -e .env.development react-app-rewired buil…

TS的初识

1.什么时候会用到TS&#xff0c;规范数据类型的时候&#xff0c;如果往参数中规定传number类型&#xff0c;传其他类型报错这种情况可以使用ts //使用js规定传入的参数类型number function first(n1,n2){if(typeOf(n1)number&&typeOf(n2)number){//顺利进入方法return …

解决下载文件接收乱码问题及自定义下载文件类型

1.在文件接收的时候设置responseType为blob格式 export function personalCourseRecordExport(params) {return request({url: url,method: get,responseType: blob,params}) }2.调用接口下载文件 async downLoadTap(){ let resawait courseRecordExport({cardNo: this.cardNo}…

el-upload的自动上传文件

<el-upload name"multipartFiles" //设置上传文件的file参数值类似于formData.append("multipartFiles":file):on-exceed"handleExceed"//拦截触发非法验证提示class"uploadaDVen" multiple :action"imgUrls" //上传文件…

vue请求接口时报警告Provisional headers are shown

是因为接口请求缓存导致的直接的办法可以在 const service axios.create({ baseURL: process.env.VUE_APP_BASE_API,//请求路径timeout: 10000 ,// request timeoutheaders:{Cache-Control: no-cache //重点清除接口的缓存} })

vue使用svg动态修改样式

1.下载svg-sprite-loader npm i -D svg-sprite-loader 2.新建组件svgIcon //index.vue <template><div v-if"isExternal" :style"styleExternalIcon" style"width:20px;height:20px;" class"svg-external-icon svg-icon" v-o…