为什么Vue.js代码在普通HTML正常运行但在Shopify主题中失效？

问题原因及解决方法 #

1. 语法冲突（最高概率） #

Shopify 使用的 Liquid 模板语法和 Vue 默认的插值语法都使用 {{ }} 作为标识，代码在下发到浏览器之前，Liquid 会先在服务端将 {{ message }} 当作 Liquid 变量解析，最终渲染为空内容，浏览器端的 Vue 自然无法识别对应插值。
解决方法：
要么修改 Vue 的插值分隔符避开冲突，要么用指令代替插值写法：

• 方案1：使用v-text指令代替插值

<div id="app">
  <span v-text="message"></span>
</div>

• 方案2：自定义Vue插值分隔符

var app = new Vue({
  el: '#app',
  // 修改分隔符为${}，和Liquid语法区分开
  delimiters: ['${', '}'],
  data: {
    message: 'Hello Vue!'
  }
})

修改后使用${message}的格式写插值即可。

2. 脚本执行顺序错误 #

如果你的 Vue 初始化代码放置在 #app 元素渲染之前执行，会因为找不到对应DOM节点导致初始化失败。
解决方法：
将初始化代码放在#app元素的下方，或者将代码包裹在DOM加载完成的回调中：

document.addEventListener('DOMContentLoaded', function() {
  var app = new Vue({
    el: '#app',
    delimiters: ['${', '}'],
    data: {
      message: 'Hello Vue!'
    }
  })
})

3. 外部脚本加载被拦截 #

Shopify 店铺的内容安全策略（CSP）可能会拦截 unpkg 等外部域名的资源加载，导致Vue没有被成功引入。
你可以先打开浏览器控制台，查看两个点：

• 你写的console.log('run-vue')有没有正常输出
• 有没有资源加载失败、Vue未定义的报错
  解决方法：
  将Vue的JS文件下载到本地，上传到Shopify主题的assets文件夹，使用主题内置的资源引用方式加载：

{{ 'vue.min.js' | asset_url | script_tag }}

4. 主题动态DOM逻辑干扰 #

部分新版Shopify主题使用了Turbo等PJAX技术，页面切换时不会全量刷新页面，仅替换部分DOM内容，你的Vue初始化代码只会在首次页面加载时执行，DOM被替换后实例就会失效。另外也可能存在其他主题脚本修改了#app元素的id或者直接移除了元素的情况。
解决方法：
如果是PJAX场景，可监听主题提供的页面切换事件，在DOM替换完成后重新初始化Vue实例，也可以直接将Vue代码封装成主题组件，跟随对应区块的渲染逻辑执行初始化。

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