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

背景

项目使用的是 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 {%>  
<% }>

参考资料

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

你可能感兴趣的:(vue-cli,模板,html,条件语句,WebpackPlugin)