您好,欢迎访问代理记账网站
  • 价格透明
  • 信息保密
  • 进度掌控
  • 售后无忧

打包优化(二)——打包配置文件处理- .env.development开发文件和 .env.production生产文件

打包优化——项目打包配置文件处理- .env.development开发文件和 .env.production生产文件

① 打开 create-react-app 脚手架文档中的部署。
② 在根目录创建 .env.production 文件,配置生产环境的接口基础路径。 (开发阶段,创建.env.development文件)
③ 在项目根目录中,打开终端。
④ 输入命令:yarn build,进行项目打包,生成 build 文件夹(打包好的项目内容)。
⑤ 将 build 目录中的文件内容,部署到服务器中即可。
⑥ 可以通过终端中的提示,使用 serve –s build 来本地查看(需要全局安装工具包 serve)。

// .env.development
REACT_APP_BASEURL=http://localhost:8088
// utils/index.js
const url = process.env.REACT_APP_BASEURL
实例

1、根目录新建开发环境文件 .env.development

//开发环境
REACT_APP_BASEURL=http://localhost:8888

2、根目录新建生产环境文件 .env.production

//生产环境
REACT_APP_BASEURL=http://xxx.abc.com

3、在src/utils/index.js中进行配置

const baseURL = process.env.REACT_APP_BASEURL
console.log(baseURL)

// 后台接口的基准路径
// export const API_BASE_URL = 'http://localhost:8080'
export const API_BASE_URL = baseURL

基准地址打印

在这里插入图片描述

4、在src/utils/api.js中进行配置

const baseURL = process.env.REACT_APP_BASEURL
console.log(baseURL)

// const BASE_URL = 'http://localhost:8080'
const BASE_URL = baseURL

5、打包验证

npm run build

6、查看变化

serve -s build

验证显示

在这里插入图片描述

7、基准地址更换为生产环境地址

在这里插入图片描述


分享:

低价透明

统一报价,无隐形消费

金牌服务

一对一专属顾问7*24小时金牌服务

信息保密

个人信息安全有保障

售后无忧

服务出问题客服经理全程跟进