crossenv使用以及根据环境打包

10次阅读

共计 733 个字符,预计需要花费 2 分钟才能阅读完成。

关于

  • 之前的项目打包都是靠手动去改环境变量 (纯属沙雕行为),随着项目越来越多,每一个项目打包都要去改这个变量的话真的是太蛋疼了,所以研究了一下webpack 打包以及node env

主要

  • 这样做有什么好处?
  publicPath: process.env.APP_ENV === 'production' ? 'https://cdn.xxxx.com/brand-mall-chengdong/' : '/',
  outputPath: './brand-mall-chengdong',

之前都是每次打包手动修改这个静态资源的地址,修改之后根据环境变量自动区分

  • 第一步,安装cross-env
yarn add cross-env@5.1.1 cross-port-killer@1.0.1 
什么是 cross-env?
解: 当您使用 NODE_ENV=production 类似设置环境变量时,大多数 Windows 命令提示将会阻塞。(例外是 Windows 上的 Bash,它使用本机 Bash。)同样,Windows 和 POSIX 命令如何利用环境变量也有所不同。使用 POSIX,您可以使用:$ENV_VAR 和您使用的 Windows %ENV_VAR%。
  • 第二步,修改 package.json 文件
    "build": "cross-env APP_ENV=production umi build",
    "build:test": "cross-env APP_ENV=test umi build",

新增一条如上命令, 当执行 npm run build 时,设置 proess.env.APP_ENVproduction , 同理设置为 test. 然后在config.js 文件中即可根据这个变量设置相应的路径。

关于

  • 文章首发于 cross-env 使用以及根据环境打包
正文完
 0