admin管理员组

文章数量:1794759

前端开发中环境变量配置

前端开发中环境变量配置

在一些特殊的配置文件中定义环境变量
文件名称对应环境说明
.env.development开发环境当运行npm run dev 的时候会以此文件为配置文件，这个文件中可以定义针对开发环境的环境变量
.env.production生产环境当运行npm run build:prod 的时候会以此文件为配置文件，这个文件中可以定义针对开发环境的环境变量
.env.staging模拟生产环境可以理解为production环境的镜像， 尽最大可能来模拟产品线上的环境(硬件，网络拓扑结构，数据库数据)

在项目运行的过程中，通过不同的命令，能加载不同的配置文件，从而获取不同的环境变量。

定义环境变量-示例

//示例是在开发环境下 # just a flag ENV = 'development' # base api //变量名=变量值 VUE_APP_BASE_API = '/dev-api' //请注意，以 `VUE_APP_` 开头的变量将通过 `webpack.DefinePlugin` 静态地嵌入到*客户端侧*的代码中，建议以它开头来定义 VUE_APP_NUM = 2000

使用环境变量

//定义好环境变量之后，项目启动之后，它会自动被集成到process.env这个属性中。我们只需要通过下面的方式使用即可 process.env.环境变量名

注意：修改服务的配置文件，想要生效的话，必须要重新启动服务

 

总结：

  • 不同的环境（开发环境，生产环境，测试环境.......）可以设置不同的变量

    开发环境 - > development的文件 生产上线 -> production的文件

  • key = value 定义环境变量 process.env.环境变量名字

  • 自定义的环境变量要以：VUE_APP_开头

    •  

    开发实例介绍

    1.场景：

    在项目开发的不同阶段，很可能要请求不同的基地址，例如：

    在开发阶段，所有ajax请求要发到地址a；

    在上线之后，所有ajax请求要发到地址b

    2.配置

    .env.devlopment

    # 开发环境的基础地址 VUE_APP_BASE_API = 'ihrm-java.itheima/api'

    .env.production

    # 生产环境的基地址 VUE_APP_BASE_API = 'www.xxx/prod-api'

    总结：设置环境变量，我们可以在不同的环境下使用不同axios基地址

    本文标签： 环境变量

    版权声明：本文标题：前端开发中环境变量配置 内容由林淑君副主任自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1686504581a74965.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。