如何在vue-cli（Webpack构建）中有条件地将单个meta标签添加到index.html

Question

我要在SIT /沙盒环境的index.html中添加上面的标记，该怎么做？

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

我无法在index.html文件中访问process.env变量，所以这就是为什么我无法做到这一点。

编辑说明：

是否有任何方法可以适应vue-cli（Webpack）构建过程，以根据构建配置文件有条件地向<meta>添加一个特定的index.html标签？ <meta>标签应在构建过程中附加，而不是在运行时使用浏览器JavaScript。

Answer 1

使用以下组合：

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

因此，您的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