时间戳

首页 > 解决方案 > 如何在 vue-cli（webpack 构建）中有条件地将单个元标记添加到 index.html

vue.js - 如何在 vue-cli（webpack 构建）中有条件地将单个元标记添加到 index.html

问题描述

我想在 index.html 中为 SIT/sandbox 环境添加上面的标签，我该怎么做？

<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">

我不能process.env在 index.html 文件中拥有访问变量，所以这就是我无法做到这一点的原因。

编辑澄清：

有没有办法调整 vue-cli (webpack) 构建过程以根据构建配置文件有条件地添加一个特定<meta>标签？标签应该在构建过程中附加，而不是在运行时使用浏览器 JavaScript index.html。<meta>

标签： vue.jswebpackvue-clivue-cli-3

解决方案

使用以下组合：

  • Webpack 和 Vue-Cli 环境变量
  • vue-cli 用作模板的 public/index.html 中的 Lodash

所以你public/index.html会有一个 lodash 指令，其中机器人内容是：

<meta name="robots" content="<%= process.env.ROBOTS_META%>"/>

然后在项目的根目录中创建一个新文件，.env其中包含以下文本：

NODE_ENV=production
ROBOTS_META=

然后在项目的根目录中创建第二个文件，名为.env.dev：

NODE_ENV=production
ROBOTS_META=noindex,nofollow

如果您想要您的生产版本，请运行：vue-cli-service build并.env使用

对于您的开发/测试/登台环境，运行：vue-cli-service build --mode dev并.env.dev使用。

要了解有关 VueCli 环境变量的更多信息，请参见此处： https ://cli.vuejs.org/guide/mode-and-env.html#environment-variables

推荐阅读