一、常规环境变量配置
使用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文件。
二、纯静态文件配置环境变量
使用htmlwebpackplugin
可以使用html-webpack-plugin在构建时处理该HTML文件并注入变量
1. 使用npm或yarn安装html-webpack-plugin
npm install --save-dev html-webpack-plugin
2. 在Webpack配置中引入并使用插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// ... 其他配置项
plugins: [
new HtmlWebpackPlugin({
template: 'path_to_your_a.html', // 指定你的a.html文件路径
filename: 'a.html', // 输出的HTML文件名，可以保持为a.html
inject: false, // 这确保了不自动注入bundle到html中
templateParameters: {
YOUR_ENV_VAR: 'your_value' // 你的环境变量
}
})
]
};
在a.html 中使用该环境变量
<script>
var envVar = '<%= YOUR_ENV_VAR %>';
if (envVar === 'your_value') {
// 你的代码
}
</script>
如果你觉得上面的书写方式太复杂，可以使用 htmlwebpackplugin.options配置。文章来源：https://www.toymoban.com/news/detail-736647.html
3. 使用htmlwebpackplugin.options方式配置环境变量
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// ... 其他配置项
plugins: [
new HtmlWebpackPlugin({
template: 'path_to_your_a.html', // 指定你的a.html文件路径
filename: 'a.html', // 输出的HTML文件名，可以保持为a.html
inject: false, // 这确保了不自动注入bundle到html中
YOUR_ENV_VAR: 'your_value' // 设置参数
})
]
};
在a.html模板中引用这个参数文章来源地址https://www.toymoban.com/news/detail-736647.html
<script>
var envVar = '<%= htmlWebpackPlugin.options.YOUR_ENV_VAR %>';
if (envVar === 'your_value') {
// 你的代码
}
</script>
到了这里，关于webpack打包时配置环境变量的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
