如何在 Shopify 中使用 CDN 脚本

【问题标题】：How to use CDN script with Shopify如何在 Shopify 中使用 CDN 脚本
【发布时间】：2021-09-16 15:46:51
【问题描述】：

我正在尝试使用 VueJs 使用 Shopify Cli 和 Store 2.0 开发 Shopify 主题。我尝试在我的 theme.liquid 中使用 CDN 脚本安装 Vue

<script src="{{ 'vue.global.js' | asset_url }}"></script>

当我像这样使用它时，一切正常，Vue Devtools 检测到 VueJ，但我在主题检查中收到此错误

Missing async or defer attribute on script tag

当我将 async 或 defer 属性添加到我的脚本标签时，Devtools 不再检测 VueJs

请问如何将 Vuejs 添加到 Shopify 而不出现此错误？

【问题讨论】：

标签： javascript vue.js shopify liquid cdn

【解决方案1】：

您可以选择忽略 theme.liquid 进行 ParserBlockingJavaScript 检查。

在您的主题检查配置文件 (.theme-check.yml) 中，找到 ParserBlockingJavaScript 并添加您想要忽略的文件。在你的情况下：

ParserBlockingJavaScript:
  enabled: true
  ignore:
    - layout/theme.liquid

或者您可以选择通过将 enabled 更改为 false 来全局禁用该检查。

但您可以选择仅禁用对该特定代码的检查：

{% comment %}theme-check-disable ParserBlockingJavaScript{% endcomment %}
<script src="{{ 'vue.global.js' | asset_url }}"></script>
{% comment %}theme-check-enable ParserBlockingJavaScript{% endcomment %}

您可以在此处找到有关不同检查的更多信息：https://github.com/Shopify/theme-check

【讨论】：