webpack打包时配置环境变量

nanxizhu

已于 2023-10-31 17:25:05 修改

阅读量1.9k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端文章标签：前端

于 2023-10-31 17:24:23 首次发布

本文链接：https://blog.youkuaiyun.com/nanxizhu/article/details/134144646

本文介绍了如何在Webpack中配置环境变量，包括使用webpack.DefinePlugin定义全局常量，并在Vue静态页面中使用这些变量，以及如何在纯静态文件中配置环境变量，利用html-webpack-plugin在构建时动态注入变量。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

webpack打包时配置环境变量

一、常规环境变量配置
- - 1. 使用webpack.DefinePlugin定义全局常量
  - 2. 在Vue静态页面中使用该环境变量
二、纯静态文件配置环境变量

一、常规环境变量配置

使用webpack.DefinePlugin插件来定义全局常量

1. 使用webpack.DefinePlugin定义全局常量

在webpack配置文件中（例如 webpack.config.js）中

const webpack = require('webpack');

module.exports = {
  // ... 其他配置项
  plugins: [
    new webpack.DefinePlugin({
      'process.env.YOUR_ENV_VAR': JSON.stringify('your_value')
    })
  ]
};

这里，我们设置了一个环境变量YOUR_ENV_VAR，并为其赋了一个值your_value。

2. 在Vue静态页面中使用该环境变量

在a.html页面中，你可以通过以下方式访问这个变量：

<script>
  if (process.env.YOUR_ENV_VAR === 'your_value') {
    // 你的代码
  }
</script>

为了在a.html中使用process.env.YOUR_ENV_VAR，a.html应该被Vue和Webpack处理。如果a.html是一个纯静态页面且没有被Webpack处理，这种方式可能不起作用。在这种情况下，你可能需要在构建时动态生成或处理HTML文件。

二、纯

最低0.47元/天解锁文章