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

落落叶叶无声2023-10-13 20:19

背景

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

环境变量

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

shell 复制代码

VUE_APP_DISABLE_IP_ACCESS=true

使用条件语句

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

html 复制代码

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

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

html 复制代码

<% 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