Laravel Vue Inertia SSR中vue-agile导入错误及Laravel Mix实现咨询

步骤1：调整vue-agile的组件导入与渲染逻辑 #

在使用vue-agile的Vue组件中，改用客户端动态导入+仅客户端渲染的方式，避免服务端执行ES模块语法：

<template>
  <client-only>
    <Agile v-if="agileLoaded" :options="carouselOptions">
      <!-- 轮播内容 -->
    </Agile>
  </client-only>
</template>

<script>
export default {
  data() {
    return {
      agileLoaded: false,
      carouselOptions: {
        // 你的轮播配置项
      }
    }
  },
  mounted() {
    // 仅在客户端环境动态加载vue-agile组件
    import('vue-agile').then(module => {
      this.$options.components.Agile = module.default
      this.agileLoaded = true
    })
  }
}
</script>

注：client-only是Inertia提供的组件，用于标记仅在浏览器端渲染的内容，确保服务端不会解析vue-agile的ES模块代码。

步骤2：修改Laravel Mix的SSR打包配置 #

在webpack.mix.js中，针对SSR构建规则添加externals配置，将vue-agile标记为外部依赖，让Node.js通过CommonJS规范加载它：

const mix = require('laravel-mix');

// 客户端构建（保留原有配置）
mix.js('resources/js/app.js', 'public/js')
   .vue()
   .inertia();

// SSR构建配置
mix.js('resources/js/ssr.js', 'public/js')
   .vue({ version: 3, options: { compilerOptions: { preserveWhitespace: true } } })
   .webpackConfig({
     target: 'node',
     output: {
       libraryTarget: 'commonjs2',
     },
     externals: {
       // 告知webpack不将vue-agile打包进服务端bundle
       'vue-agile': 'commonjs vue-agile'
     }
   })
   .inertia({ ssr: true });

步骤3：确认依赖安装方式 #

确保vue-agile被安装为生产环境依赖（而非开发依赖），保证服务端能正常加载：

npm install vue-agile --save

验证 #

重启Laravel开发服务器与SSR服务，检查轮播组件是否正常渲染，同时确认服务端不再抛出"Cannot use import statement outside a module"错误。

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