为什么vue-splide无法在Nuxt2项目中正常运行？

问题根因说明 #

1. Cannot use import statement outside a module 报错是因为 @splidejs 相关包默认输出ES模块，Nuxt2默认不转译node_modules下的第三方ES模块，导致打包时无法识别import语法。
2. 转译后出现window is not defined报错是因为Splide依赖浏览器的window对象，服务端渲染阶段不存在该全局变量，哪怕用了client-only标签，只要组件在服务端被注册/解析，就会提前触发依赖加载报错。

解决步骤 #

方案1：调整全局注册配置

第一步：修改nuxt.config.js

buildDir: '../functions/nuxt',
// 新增css配置项，统一托管splide样式
css: ['@splidejs/splide/dist/css/themes/splide-default.min.css'],
build: {
  publicPath: '/public/',
  extractCSS: true,
  // 新增transpile配置，指定转译splide相关依赖
  transpile: ['@splidejs/vue-splide', '@splidejs/splide'],
  // 删掉你自定义的babel配置，Nuxt2内置的babel配置已满足需求，额外添加会引发冲突
},
plugins: [
  // 保留客户端插件配置，mode: 'client'确保只在客户端加载
  { src: '~/plugins/splide.client.js', mode: "client" }
],

第二步：调整splide.client.js

移除已托管到全局配置的css导入：

import Vue from 'vue';
import VueSplide from '@splidejs/vue-splide';

Vue.use(VueSplide);

第三步：调整页面模板

确保用<client-only>标签包裹splide相关代码，避免服务端尝试解析渲染：

<client-only>
  <splide :options="{ rewind: true }" class="banner-container">
    <splide-slide class="slide" v-for="slide in slides" :key="slide.id">
      <img :src="slide.imagen" :alt="slide.tombre" />
     </splide-slide>
  </splide>
</client-only>

方案2：局部引入（更稳妥，避免全局注册的兼容问题）

如果方案1仍报错，可以放弃全局插件注册，改为在用到splide的页面局部异步引入：

1. 删掉nuxt.config.js里的splide相关插件配置
2. 在页面组件中按如下方式动态注册组件：

export default {
  components: {
    // 仅在客户端加载splide组件
    Splide: () => process.client ? import('@splidejs/vue-splide').then(m => m.Splide) : Promise.resolve({ render: h => h('div') }),
    SplideSlide: () => process.client ? import('@splidejs/vue-splide').then(m => m.SplideSlide) : Promise.resolve({ render: h => h('div') }),
  },
  // 其余业务代码保持不变
  data() {
    return {
      slides: []
    }
  }
}

3. 模板依然用<client-only>包裹splide代码，splide的css样式可以放在页面style标签中导入，或者保留在nuxt.config的css配置项里。

注意：你当前使用的@splidejs/vue-splide@0.3.5是兼容Vue2的版本，适配Nuxt2没有问题，不要升级到更高版本，高版本仅支持Vue3。

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