create-react-app打包环境配置
设置不同环境的打包,这里区分为三种环境,线上的测试,演示,正式环境
1。安装 cross-env。兼容跨平台(window, mac)设置的环境变量的有效性。
npm install npm install --save-dev cross-env
npm install npm install --save-dev cross-env
2.在package.json中配置打包命令,create-react-app文档规定自定义环境变量必须以REACT_APP_开头,并且可以在全局使用(包括业务逻辑)。
打包命令分别为npm run dev, npm run demo, npm run prod;
"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 正式环境 },
4.在src文件夹下新建 utils 文件夹。里面新建 initEnv.js文件。写上不同环境下的需要的域名:
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, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />. // 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, } );
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
打开控制台,就可以看到打印值:正式服域名;
————————————————
版权声明:本文为CSDN博主「yagmdream」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/sinat_40257787/article/details/104824677