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

背景

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

环境变量

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

VUE_APP_DISABLE_IP_ACCESS=true
1

使用条件语句

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

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

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

<% if(VUE_APP_DISABLE_IP_ACCESS=='true') {%>
    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
<% } else {%>  
<% }>
1
2
3
4

参考资料

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