如何在Shopify中使用Vue.js CDN脚本且消除theme check报错

加async/defer后Vue Devtools识别失败的核心原因是脚本执行顺序错乱：async属性不保证脚本执行顺序，defer属性仅保证多个带defer的脚本按出现顺序执行，如果你的Vue初始化逻辑没有和Vue库的加载时机对齐，就会出现初始化时Vue未定义、实例挂载失败的问题，自然无法被Devtools识别。

方案1：调整脚本加载逻辑，符合Theme Check规范 #

defer属性不会阻塞页面渲染，且会保证同属defer的脚本按页面中的出现顺序执行，完全符合规则要求，调整方式如下：

• 给Vue库的引入标签添加defer属性

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

• 所有依赖Vue的初始化代码（不管是外部js文件还是内联脚本），全部放在Vue引入标签的下方，同时添加defer属性：

<!-- 外部初始化脚本示例 -->
<script src="{{ 'vue-app-init.js' | asset_url }}" defer></script>

<!-- 内联初始化逻辑示例 -->
<script defer>
const app = Vue.createApp({
  // 你的应用配置
})
app.mount('#vue-root')
</script>

调整后加载和执行顺序正常，功能、Devtools都可以正常使用，不会触发Theme Check报错。

方案2：针对性禁用Theme Check校验规则 #

如果你明确需要Vue同步加载（比如首屏核心内容依赖Vue渲染，不能延后加载），可以直接给当前脚本添加规则忽略注释，跳过该条校验：

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

该方式不会改动原有加载逻辑，也不会影响其他脚本的规则校验，所有功能均可正常运行。

内容的提问来源于stack exchange，提问作者Ali Khiti