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

时间：2023-12-14

下面我来详细讲解使用环境变量方式在Vue CLI的index.html中使用的完整攻略。

1. 环境变量配置

首先，我们需要在.env文件中配置环境变量。Vue CLI会自动加载.env文件中的配置，具体的加载顺序可以参考官方文档。下面是一个简单的.env文件示例：

VUE_APP_TITLE=My App
VUE_APP_API_BASE_URL=http://localhost:3000/api

在这个示例中，我们定义了两个环境变量：

VUE_APP_TITLE：应用程序的标题
VUE_APP_API_BASE_URL：API的基本URL

值得注意的是，我们以VUE_APP_开头为前缀的变量名，这是因为Vue CLI会自动将这样的变量注入到应用程序中，我们可以在Vue组件或者index.html中通过process.env.VUE_APP_XXX的方式引用这些变量。

2. 在index.html中使用环境变量

现在，我们可以在Vue的index.html中使用环境变量了。下面是一个例子：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title><%=process.env.VUE_APP_TITLE%></title>
  <script>
    window._env_ = <%= JSON.stringify(process.env) %>;
  </script>
</head>
<body>
  <div id="app"></div>
  <!-- built files will be auto injected -->
</body>
</html>

在这个例子中，我们在<title>标签中使用了环境变量VUE_APP_TITLE，在<script>标签中将所有环境变量注入到window._env_变量中，这样在运行时我们就可以在代码中访问它了。如果你需要在Vue组件中使用环境变量，可以通过process.env.VUE_APP_XXX的方式访问它。

3. 示例说明

这里提供两个使用环境变量的示例：

示例1：定义不同的API基本URL

我们需要定义两个不同的API基本URL：一个是开发环境下的URL，另一个是生产环境下的URL。我们可以在.env.development和.env.production文件中分别定义这两个URL，然后在Vue的index.html中使用它：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title><%=process.env.VUE_APP_TITLE%></title>
  <script>
    window._env_ = {
      VUE_APP_API_BASE_URL: '<%=process.env.VUE_APP_API_BASE_URL%>'
    };
  </script>
</head>
<body>
  <div id="app"></div>
  <!-- built files will be auto injected -->
</body>
</html>

在这个例子中，我们将VUE_APP_API_BASE_URL变量注入到了window._env_中，这样就可以在运行时动态地使用它了。

示例2：定义不同的网站标题

我们需要定义两个不同的网站标题：一个是中文版，另一个是英文版。我们可以在.env.zh和.env.en文件中分别定义这两个标题，然后在Vue的index.html中使用它：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title><%=process.env.VUE_APP_TITLE%></title>
  <script>
    window._env_ = {
      TITLE: '<%=process.env.VUE_APP_TITLE%>'
    };
  </script>
</head>
<body>
  <div id="app"></div>
  <!-- built files will be auto injected -->
</body>
</html>

在这个例子中，我们将VUE_APP_TITLE变量注入到了window._env_中，并将其命名为TITLE。我们可以在Vue组件中通过process.env.TITLE的方式使用它。

上一篇：详解html-webpack-plugin用法全解 下一篇：解决vuejs项目里css引用背景图片不能显示的问题