下面我来详细讲解使用环境变量方式在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的方式使用它。