时间戳

首页 > 解决方案 > 如何在 VueJS 项目的 index.html 中显示特定的 head 标签？

vue.js - 如何在 VueJS 项目的 index.html 中显示特定的 head 标签？

问题描述

我只想在生产模式下显示 index.html 文件中的特定标签，但特别是在 /public/index.html 文件中。

我在 SO 上看到了一些关于如何知道我们是否在 dev/prod 中的问题，但对于 Node，不在 index.html 文件中，它似乎有自己的渲染模板。

标签： vue.js

解决方案

我假设您正在使用 Vue CLI 或 Webpack + HtmlWebpackPlugin 直接...

如果你使用 Vue CLI 来管理你的项目，Vue CLI 已经预先配置了 Webpack 和 HtmlWebpackPlugin，所有客户端 ENV 变量都可用于（默认）Lodash 模板引擎

所以你只需要在你的index.html模板中添加这样的东西：

<% if(NODE_ENV === "production") { %>
 ...insert any HTML here
<% } %>

如果您不使用 Vue CLI，则必须配置 HtmlWebpackPlugin以webpack.config.js使NODE_ENV变量在模板中可用：

plugins: [
    new HtmlWebpackPlugin({
      templateParameters: {
        'NODE_ENV': process.env.NODE_ENV
      }
    })
  ]

推荐阅读