vue-cli 输出的模板 html 文件使用条件语句

原创已于 2023-10-13 13:37:29 修改 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue-cli #模板 #html #条件语句 #WebpackPlugin

于 2023-10-12 16:53:05 首次发布

本文介绍了在VueCLI项目中，如何根据.env.development文件中的环境变量使用条件语句（如三目表达式和if语句）动态插入或移除HTML模板中的Content-Security-Policy。重点讲解了两种方法并给出了相关参考资料。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

背景

项目使用的是 vue-cli 脚手架，需要根据不同环境的配置，在输出的 html 模板中使用条件语句来生成不同的代码。

环境变量

在 .env.development 中，定义环境变量

VUE_APP_DISABLE_IP_ACCESS=true

使用条件语句

第一种方法，使用 <%= %> 和三目表达式

<%= VUE_APP_DISABLE_IP_ACCESS=='true' ? '<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">' : '' %>

第二种方法，使用 <% %> 和 if 语句

<% if(VUE_APP_DISABLE_IP_ACCESS=='true') {%>
    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
<% } else {%>  <!-- 没有 if 可以去掉 -->
<% }>

参考资料

了解 vue-cli 处理 html 和静态资源，参考： HTML 和静态资源
了解 HTMLWebpackPlugin 如何注入模板参数，参考：templateParameters