本文共 3981 字，大约阅读时间需要 13 分钟。

create-react-app 打包环境以及打包输出文件夹名设置

• create-react-app 不同环境打包及打包到对应的文件夹内
• 设置不同环境打包不同文件夹

设置不同环境的打包，这里区分为三种环境，线上的测试，演示，正式环境

1。安装 cross-env。兼容跨平台(window, mac)设置的环境变量的有效性。

npm install npm install --save-dev cross-env

2.在package.json中配置打包命令，create-react-app文档规定自定义环境变量必须以REACT_APP_开头，并且可以在全局使用（包括业务逻辑）。

"scripts": {
       "start": "cross-env REACT_APP_SECRET_ENV='development' node scripts/start.js",   // 生成的项目文件本地运行的命令，这里加上测试打包环境    "build": "node scripts/build.js",    "test": "node scripts/test.js",    "dev": "cross-env REACT_APP_SECRET_ENV='development' node scripts/build.js",   // development 测试环境    "demo": "cross-env REACT_APP_SECRET_ENV='demoing' node scripts/build.js",     // demoing 演示环境    "prod": "cross-env REACT_APP_SECRET_ENV='production' node scripts/build.js"   // production 正式环境  },

3.打开config文件夹下的 env.js,大概在74，75行吧,加上设置的环境变量

function getClientEnvironment(publicUrl) {
     const raw = Object.keys(process.env)    .filter(key => REACT_APP.test(key))    .reduce(      (env, key) => {
           env[key] = process.env[key];        return env;      },      {
           // Useful for determining whether we’re running in production mode.        // Most importantly, it switches React into the correct mode.        NODE_ENV: process.env.NODE_ENV || 'development',+        REACT_APP_SECRET_ENV: process.env.REACT_APP_SECRET_ENV,   // 新加的环境变量------------------为了看起来明显点^_^        // Useful for resolving the correct path to static assets in `public`.        // For example, .        // This should only be used as an escape hatch. Normally you would put        // images into the `src` and `import` them in code to get their paths.        PUBLIC_URL: publicUrl,        // We support configuring the sockjs pathname during development.        // These settings let a developer run multiple simultaneous projects.        // They are used as the connection `hostname`, `pathname` and `port`        // in webpackHotDevClient. They are used as the `sockHost`, `sockPath`        // and `sockPort` options in webpack-dev-server.        WDS_SOCKET_HOST: process.env.WDS_SOCKET_HOST,        WDS_SOCKET_PATH: process.env.WDS_SOCKET_PATH,        WDS_SOCKET_PORT: process.env.WDS_SOCKET_PORT,      }    );

4.在src文件夹下新建 utils 文件夹。里面新建 initEnv.js文件。写上不同环境下的需要的域名：

// init var api_url = 'http://192.168.1.0'  //替换成你的域名，初始化，一般写测试的就行// 获取设置的环境变量 process.env.REACT_APP_SECRET_ENVvar env = process.env.REACT_APP_SECRET_ENV;switch(env) {
       case 'development':         api_url = 'http://192.168.1.0';                break;    case 'demoing':        api_url =  '演示服域名';        break;    case 'production':                api_url = '正式服域名'        break;    default:        api_url = 'http://192.168.1.0'}export default  {
       apiUrl: api_url,}

5.index.js 引入配置好的接口文件 initEnv.js,现在各个环境需要的接口都配置好了。执行相对应的命令就可以打包出对应环境的文件。然后就可以随心所使用欲啦～

import API from './utils/initEnv';console.log(API.apiUrl);

设置不同环境打包不同文件夹

1.打开config文件夹下的path.js文件。在文件最后：

// config after eject: we're in ./config/module.exports = {
     dotenv: resolveApp('.env'),  appPath: resolveApp('.'),  appBuild: resolveApp('build'),    //  就是这个了，把 `build` 替换成你设置的文件名，根据`process.env.REACT_APP_SECRET_ENV`设置。  appPublic: resolveApp('public'),  appHtml: resolveApp('public/index.html'),  appIndexJs: resolveModule(resolveApp, 'src/index'),  appPackageJson: resolveApp('package.json'),  appSrc: resolveApp('src'),  appTsConfig: resolveApp('tsconfig.json'),  appJsConfig: resolveApp('jsconfig.json'),  yarnLockFile: resolveApp('yarn.lock'),  testsSetup: resolveModule(resolveApp, 'src/setupTests'),  proxySetup: resolveApp('src/setupProxy.js'),  appNodeModules: resolveApp('node_modules'),  publicUrlOrPath,};module.exports.moduleFileExtensions = moduleFileExtensions;

设置完成，可以打包看看。

华丽丽的分割线～～～

tip: 想看打印出来的对应的域名是不是对的。可以安装本地服务。分别打包对应的命令并启动服务在控制台查看

1.先打包文件，这里我们打包正式环境npm run prod,打包完成之后项目根目录会有一个build的文件夹。

2.安装serve:

npm install -g serve

安装完成后，启动serve

serve -s build-pro

打开控制台，就可以看到打印值：正式服域名;

转载地址：http://snzsi.baihongyu.com/