react v18——env环境变量配置、打包配置(craco)

一、env文件

像其他项目一样,在根目录新建 .env 文件,如 .env.development

env 复制代码
REACT_APP_ENV=development
REACT_APP_API_BASE_URL=http://192.168.2.107:31000

REACT_APP_API_BASE_URL 可以用在 axios 封装的位置,作为 baseURL

js 复制代码
const instance = axios.create({
baseURL: process.env.REACT_APP_API_BASE_URL,
  timeout: 30000,
  // `withCredentials` 表示跨域请求时是否需要使用凭证
  withCredentials: false,
});

这种直接使用 全链接请求 的方式,需要 后端 配合解决下 跨域 问题。

二、代理配置

如果想要用代理,可以 在 craco.config.js 中配置:

(在使用less篇,有 craco的安装使用步骤

js 复制代码
// 跨域配置
  devServer: {
    proxy: {
      "/api": {
        target: "http://192.168.2.107:31000",
        changeOrigin: true,
        pathRewrite: {
          "^/api": "",
        },
      },
    },

这时候 axios 的 baseUrl 就不用全链接了,比如:

js 复制代码
const instance = axios.create({
  baseURL: "/api",
  timeout: 30000,
  // `withCredentials` 表示跨域请求时是否需要使用凭证
  withCredentials: false,
});

三、package.json 打包配置

  • 安装 cross-env:yarn add cross-env
  • 修改scripts,即可使用对应命令打包
json 复制代码
"scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject",
    "build:dev": "cross-env REACT_APP_ENV=development craco build",
    "build:test": "cross-env REACT_APP_ENV=test craco build",
    "build:prod": "cross-env REACT_APP_ENV=production craco build"
  },
相关推荐
冴羽yayujs19 小时前
SvelteKit 最新中文文档教程(17)—— 仅服务端模块和快照
前端·javascript·vue.js·前端框架·react
AI_Auto4 天前
AI Agent系列(八) -基于ReAct架构的前端开发助手(DeepSeek)
人工智能·react·ai agent
YiHanXii5 天前
Axios 相关的面试题
前端·http·vue·react
百锦再6 天前
Reactive编程:应用场景和传统比较
运维·开发语言·javascript·python·flask·react·tornado
冴羽yayujs8 天前
SvelteKit 最新中文文档教程(12)—— 高级路由
前端·javascript·vue.js·前端框架·react·svelte·sveltekit
shmily_yyA9 天前
Nextjs15 - 什么是CSR、SSR、SSG和ISR
前端·react
小周不摆烂9 天前
React 揭秘:从新手到高手的进阶之路
前端框架·react
渴望成为python大神的前端小菜鸟10 天前
2025前端面试题(vue、react、uniapp、微信小程序、JS、CSS、其他)
前端·javascript·vue.js·面试·微信小程序·uni-app·react
冴羽yayujs14 天前
SvelteKit 最新中文文档教程(6)—— 状态管理
前端·javascript·vue.js·前端框架·react·svelte·sveltekit
任磊abc18 天前
在react当中利用IntersectionObserve实现下拉加载数据
前端·react·observer·下拉加载·intersection