首先，为了使用vue-cli中的环境变量，我们需要在根目录下新建一个.env文件。在这个文件中，我们可以设置自定义的环境变量，并以VUE_APP_为前缀命名，例如：VUE_APP_BASE_API=http://localhost:3000。这样，在我们的项目中就可以使用process.env.VUE_APP_BASE_API调用这个环境变量了。
接下来，我们需要在index.html中使用这个环境变量。具体过程是在index.html文件中，使用%PUBLIC_URL%进行占位，并在JavaScript中替换这个占位符为我们定义的环境变量，代码实现如下：
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<title>Vue App</title>
<script>
// 注意：这里的变量名一定要与.env中定义的变量名一致
const BASE_API = '<%= process.env.VUE_APP_BASE_API %>';
</script>
</head>
<body>
<div id="app"></div>
<script src="./dist/js/app.js"></script>
</body>
</html>
注意，这里的占位符<%= process.env.VUE_APP_BASE_API %>使用的是ejs模板语法。
假设我们在.env文件中定义了一个环境变量VUE_APP_BASE_API=http://localhost:3000，那么上述代码中的BASE_API变量就会被替换为http://localhost:3000。
除了上述的方式，我们还可以使用webpack的DefinePlugin插件来在JavaScript代码中直接访问这些环境变量，代码实现如下：
// webpack.config.js
const webpack = require('webpack')
const dotenv = require('dotenv')
// 加载根目录下的.env文件
const env = dotenv.config().parsed
// 用env的值替换process.env中的变量
const envKeys = Object.keys(env).reduce((prev, next) => {
prev[`process.env.${next}`] = JSON.stringify(env[next])
return prev
}, {})
module.exports = {
// ...其他的配置
plugins: [
new webpack.DefinePlugin(envKeys)
]
}
在上述代码中，首先我们使用dotenv模块来加载根目录下的.env文件，并将其中的变量设置为环境变量。然后，我们使用webpack的DefinePlugin插件将这些环境变量注入到JavaScript代码中，使得我们可以在代码中直接访问它们，例如process.env.VUE_APP_BASE_API。
使用这种方式，我们可以在任何JavaScript文件中都可以访问这些环境变量，而不需要在每个文件都手动引入占位符并替换它们。同时，以上方式也支持在vue组件中使用这些环境变量。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：vue-cli的index.html中使用环境变量方式 - Python技术站
微信扫一扫 
支付宝扫一扫 