大气网站源码下载,高端大气的医院网站,景安备案域名购买,学设计的网站有哪些内容在前端开发中#xff0c;如何让项目在不同环境下表现得更为灵活与高效#xff0c;是每个开发者必须面对的挑战#xff0c;从开发阶段的调试到生产环境的优化#xff0c;环境变量配置无疑是其中的关键。 env配置文件#xff1a;通常用于管理项目的环境变量#xff0c;环境… 在前端开发中如何让项目在不同环境下表现得更为灵活与高效是每个开发者必须面对的挑战从开发阶段的调试到生产环境的优化环境变量配置无疑是其中的关键。 env配置文件通常用于管理项目的环境变量环境变量是一些预设的值可以根据不同的环境(如开发环境、测试环境和生产环境)动态地调整应用的配置这些配置文件通常包含项目运行所需的各种配置参数例如 API 地址、版本号、调试模式开关等接下来就该文件的作用意义及其具体使用进行如下讲解
作用和优势在前端开发过程中项目通常需要在不同的环境中运行例如 1开发环境通常用于本地开发和调试可能连接到本地服务调试模式开启。 2生产环境部署到线上访问的是正式的服务器配置和性能优化也有所不同。 为了让项目能够在这些环境中灵活切换开发者通常使用env配置文件来存储环境特定的变量。这些配置文件让项目能够根据不同的环境加载不同的值从而避免了硬编码配置提高了项目的可维护性和可移植性前端项目中的env配置文件通常使用.env文件这个文件遵循一种简单的键值对的形式类似于
每行是一个环境变量的声明REACT_APP_ 是前缀(这个前缀通常是为了符合框架的要求如 react或vue)而后面的值则可以根据需要进行修改
REACT_APP_API_URLhttps://api.example.com
REACT_APP_DEBUGtrue
使用环境变量的好处如下 1解耦配置使得配置文件与代码分离减少了配置的硬编码提升了项目的灵活性。 2提高安全将敏感信息如API密钥等放在.env文件中可以避免信息泄露。 3维护管理不同的开发、测试和生产环境可以使用不同的配置方便管理多个环境差异 如何使用env配置文件前端开发框架(如react、vue等)通常提供了一些内置的机制帮助开发者根据环境加载不同的env配置文件例如在react中默认支持.env文件可以根据不同的环境使用不同的配置文件如下所示
env // 默认配置文件(类似全局可以使用)
env.development // 开发环境配置文件(特定环境使用)
env.production // 生产环境配置文件(特定环境使用)
env.test // 测试环境配置文件(特定环境使用)这里我们根据上面不同的配置环境新建不同的环境变量然后我们通过在package.json文件中通过--mode来指定要执行的环境变量如下我们指定test环境变量 来到控制台可以看到我们执行的test环境变量被打印了出来 注意因为这里我们使用了vite框架接下来我们开始使用.env文件当中的环境变量中前缀必须是VITE_命名否则是拿不到数据的如下所示 vite使用dotenv从你的环境目录中的下列文件加载额外的环境变量
.env // 所有情况下都会加载
.env.local // 所有情况下都会加载但会被git忽略
.env.[mode] // 只在指定模式下加载
.env.[mode].local // 只在指定模式下加载但会被git忽略
像我们常用的就是在不同的环境变量配置文件中配置不同的环境变量每次打包的时候就不需要我们去手动更改环境变量了而是会自动寻找我们配置的环境变量文件进行打包 使用node在代码中使用环境变量时可以通过process.env来访问这使得能够在代码中动态获取不同环境下的配置而不需要在代码中硬编码URL或其他敏感信息例如在react项目中
// 终端执行如下命令安装node类型
npm i --save-dev types/node// 输出 https://api.example.com
console.log(process.env.REACT_APP_API_URL); vite配置根据官方文档的指出我们知道vite默认是不加载.env文件的因为这些文件需要在执行完vite配置后才能确定加载哪一个举个例子root和envDir选项会影响加载行为不过当你的确需要时你可以使用vite导出的loadEnv函数来加载指定的.env文件如下所示
import { defineConfig, loadEnv } from vite
import react from vitejs/plugin-reactexport default defineConfig(({ command, mode }) {// 根据当前工作目录中的 mode 加载 .env 文件const env loadEnv(mode, process.cwd(), ) // 设置第三个参数为 来加载所有环境变量而不管是否有 VITE_ 前缀。console.log(mode)console.log(command)console.log(env.VITE_APP_TITLE)return {plugins: [react()],build: {outDir: docs,},define: {process.env: env,},}
})
然后控制台打印的数据如下所示 其中导出函数的两个参数分别对应的值为·command为当前项目的运行模式开发模式它返回的值是serve而在生产环境下为build-mode读取的是.env文件的后缀默认development用于开发production用于构建这也就是他为什么会自动读取开发环境变量配置文件的原因
import { defineConfig, loadEnv } from vite
import react from vitejs/plugin-reactexport default defineConfig(({ command, mode }) {// 根据当前工作目录中的 mode 加载 .env 文件const env loadEnv(mode, process.cwd(), ) // 设置第三个参数为 来加载所有环境变量而不管是否有 VITE_ 前缀。console.log(mode)console.log(command)console.log(env.VITE_PORT)return {plugins: [react()],server: {host: 0.0.0.0, // 主机port: Number(env.VITE_PORT), // 端口proxy: {api: {target: env.VITE_APP_API_BASEURL, // 目标代理服务器地址changeOrigin: true, // 允许跨域rewrite: (path) path.replace(/^\/api/, ) // 重写路径}},},}
})
