在vue组件中获取vue-config中的环境变量

8298次阅读 733人点赞 作者: WuBin 发布时间: 2025-02-21 09:49:00
扫码到手机查看

在 vue.config.js 中配置环境变量

vue.config.js里,你可以通过process.env来设置自定义的环境变量。示例如下:

// vue.config.js
const LOCAL_HOST = 'http://192.168.1.100';

module.exports = {
  chainWebpack: config => {
    // 设置环境变量
    config.plugin('define').tap(args => {
      args[0]['process.env'].LOCAL_HOST = JSON.stringify(LOCAL_HOST);
      return args;
    });
  }
};

在 Vue 组件中获取环境变量

在 Vue 组件里,你能够通过process.env来获取之前设置的环境变量。示例代码如下:

<template>
  <div>
    <p>LOCAL_HOST: {{ localHost }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      localHost: process.env.LOCAL_HOST
    };
  }
};
</script>
  • vue.config.js中的配置

    • chainWebpackvue.config.js提供的一个用于链式修改 Webpack 配置的方法。
    • config.plugin('define')用于获取 Webpack 的DefinePlugin实例,该插件可以在编译时将全局常量注入到代码中。
    • tap方法用于修改插件的参数,我们在这里将LOCAL_HOST作为环境变量注入到process.env中。
  • 环境变量在编译时就会被替换,所以修改vue.config.js后需要重新启动开发服务器或者重新构建项目。

打包会替换

在 Webpack 构建过程中,DefinePlugin会在编译阶段对代码中引用的process.env相关变量进行替换。以你之前的示例来说,process.env.LOCAL_HOST会在编译时被替换成具体的值'http://192.168.1.100'

在打包时,Webpack 会把process.env.LOCAL_HOST替换成实际的值,最终打包生成的代码中不会再出现process.env.LOCAL_HOST,而是直接使用具体的'http://192.168.1.100'

影响

  • 优点:变量在打包时被固化到代码中,无需在运行时额外去获取变量值,避免了额外的请求或依赖,使代码可以独立运行。
  • 缺点:如果后续需要修改这个变量的值,就必须重新打包整个项目。因为变量已经被硬编码到打包后的文件里了,不重新打包无法更改其值。

点赞 支持一下 觉得不错?客官您就稍微鼓励一下吧!
关键词:chainWebpack
推荐阅读
  • uniapp实现被浏览器唤起的功能

    当用户打开h5链接时候,点击打开app若用户在已经安装过app的情况下直接打开app,若未安装过跳到应用市场下载安装这个功能在实现上主要分为两种场景,从普通浏览器唤醒以及从微信唤醒。

    10556次阅读 698人点赞 发布时间: 2022-12-14 16:34:53 立即查看
  • Vue

    盘点Vue2和Vue3的10种组件通信方式

    Vue中组件通信方式有很多,其中Vue2和Vue3实现起来也会有很多差异;本文将通过选项式API组合式API以及setup三种不同实现方式全面介绍Vue2和Vue3的组件通信方式。

    5035次阅读 378人点赞 发布时间: 2022-08-19 09:40:16 立即查看
  • JS

    几个高级前端常用的API

    推荐4个前端开发中常用的高端API,分别是MutationObserver、IntersectionObserver、getComputedstyle、getBoundingClientRect、requ...

    15089次阅读 994人点赞 发布时间: 2021-11-11 09:39:54 立即查看
  • PHP

    【正则】一些常用的正则表达式总结

    在日常开发中,正则表达式是非常有用的,正则表达式在每个语言中都是可以使用的,他就跟JSON一样,是通用的。了解一些常用的正则表达式,能大大提高你的工作效率。

    14596次阅读 575人点赞 发布时间: 2021-10-09 15:58:58 立即查看
  • 【中文】免费可商用字体下载与考证

    65款免费、可商用、无任何限制中文字体打包下载,这些字体都是经过长期验证,经得住市场考验的,让您规避被无良厂商起诉的风险。

    13310次阅读 1076人点赞 发布时间: 2021-07-05 15:28:45 立即查看
  • Vue

    Vue3开发一个v-loading的自定义指令

    在vue3中实现一个自定义的指令,有助于我们简化开发,简化复用,通过一个指令的调用即可实现一些可高度复用的交互。

    17435次阅读 1404人点赞 发布时间: 2021-07-02 15:58:35 立即查看
  • JS

    关于手机上滚动穿透问题的解决

    当页面出现浮层的时候,滑动浮层的内容,正常情况下预期应该是浮层下边的内容不会滚动;然而事实并非如此。在PC上使用css即可解决,但是在手机端,情况就变的比较复杂,就需要禁止触摸事件才可以。

    15845次阅读 1282人点赞 发布时间: 2021-05-31 09:25:50 立即查看
  • Vue

    Vue+html2canvas截图空白的问题

    在使用vue做信网单页专题时,有海报生成的功能,这里推荐2个插件:一个是html2canvas,构造好DOM然后转canvas进行截图;另外使用vue-canvas-poster(这个截止到2021年3月...

    31213次阅读 2459人点赞 发布时间: 2021-03-02 09:04:51 立即查看
  • Vue

    vue-router4过度动画无效解决方案

    在初次使用vue3+vue-router4时候,先后遇到了过度动画transition进入和退出分别无效的情况,搜遍百度没没找到合适解决方法,包括vue-route4有一些API都进行了变化,以前的一些操...

    27145次阅读 2089人点赞 发布时间: 2021-02-23 13:37:20 立即查看
交流 收藏 目录