求助：Vue.js项目中引入仅客户端渲染脚本的问题

Hey there! 作为Vue新手接手别人的SSR项目遇到这种情况真的很常见，别慌～ 你遇到的核心问题是：SSR框架（比如Nuxt或者自定义Vue SSR）会把整个页面模板包括body结束标签后的内容都在服务端解析处理，所以直接放脚本标签还是会被服务端执行。下面给你几个靠谱的解决办法：

• 利用Vue的mounted钩子动态加载脚本
  mounted生命周期钩子是仅在客户端执行的，组件挂载到DOM后才会触发，刚好适合加载客户端专属脚本。你可以这样写：

  mounted() {
    // 动态创建脚本标签
    const clientScript = document.createElement('script');
    clientScript.src = '你的脚本文件路径';
    clientScript.async = true; // 按需开启异步加载，不阻塞页面
    document.body.appendChild(clientScript);
    
    // 如果脚本加载后需要执行回调，可以加监听
    clientScript.onload = () => {
      console.log('客户端脚本加载完成！');
      // 这里可以执行依赖该脚本的逻辑
    };
  }
  

  这种方法的好处是完全避开服务端渲染，脚本只会在浏览器环境里被加载执行。

• 用<client-only>组件包裹脚本（针对Nuxt等SSR框架）
  如果你用的是Nuxt这类成熟的SSR框架，官方提供了<client-only>组件，里面的内容只会在客户端渲染：

  <template>
    <!-- 其他组件内容 -->
    <client-only>
      <script src="你的脚本路径"></script>
    </client-only>
  </template>
  

  另外也可以在Nuxt的配置文件里直接指定脚本为客户端模式：

  // nuxt.config.js
  export default {
    app: {
      script: [
        { 
          src: '你的脚本路径', 
          body: true, // 插入到body末尾
          mode: 'client' // 仅客户端加载
        }
      ]
    }
  }
  

• 判断浏览器环境再加载脚本
  最通用的方法是检查当前环境是否存在window对象（服务端没有window），只有在客户端才加载脚本：

  if (typeof window !== 'undefined') {
    const script = document.createElement('script');
    script.src = '你的脚本路径';
    document.body.appendChild(script);
  }
  

  你可以把这段代码放在组件的created钩子（注意created在SSR中也会执行，但判断window后服务端会跳过）或者单独的工具函数里。

小提醒 #

如果你的脚本依赖页面中的某个DOM元素，一定要确保元素已经渲染完成再加载脚本——mounted钩子刚好满足这个条件，因为此时组件已经挂载到DOM树里啦。

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