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

在 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中的配置：

• chainWebpack是vue.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'。

影响

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