vue-cli的index.html中使用环境变量方式

首先，为了使用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技术站