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

背景

项目使用的是 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 可以去掉 -->
<% }>

参考资料

相关推荐
云知谷8 分钟前
【HTML】网络数据是如何渲染成HTML网页页面显示的
开发语言·网络·计算机网络·html
昔人'5 小时前
`tanslate=“no“`避免使用 HTML 中的翻译属性自动翻译品牌名称等
html
执沐5 小时前
基于HTML 使用星辰拼出爱心,并附带闪烁+流星+点击生成流星
前端·html
duandashuaige7 小时前
解决用electron打包Vue工程(Vite)报错electron : Failed to load URL : xxx... with error : ERR _CONNECTION_REFUSED
javascript·typescript·electron·npm·vue·html
勤奋菲菲9 小时前
深入理解HTML文本标签:构建网页内容的基础
前端·html
昔人'9 小时前
html`<mark>`
前端·javascript·html
snow@li1 天前
html5:拖放 / demo / 拖放事件(Drag Events)/ DataTransfer 对象方法
前端·html·拖放
Dragonir1 天前
React+Three.js 实现 Apple 2025 热成像 logo
前端·javascript·html·three.js·页面特效
aichitang20241 天前
欧拉拓扑学公式:几何与拓扑的交汇
html·拓扑学
urhero1 天前
工作事项管理小工具——HTML版
前端·html·实用工具·工作事项跟踪·任务跟踪小工具·本地小程序