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

Question

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

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

Answer 1

我假设您直接使用Vue CLI或Webpack+HtmlWebpackPlugin。。。

如果您使用Vue CLI来管理您的项目，Vue CLI已经预配置了Webpack和HtmlWebpackPlugin，专门为(默认(Lodash模板引擎提供了所有客户端ENV变量

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

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

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

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