如何在Svelte+Inertia.js中定义全局<Link>组件（类Vue实现）

当然可以实现类似Vue的全局组件注册效果，在Svelte里有两种常用方式让Inertia的Link组件无需重复引入即可全局调用：

方式一：通过Svelte编译器配置全局注册（Svelte 3+支持） #

1. 在项目根目录的svelte.config.js中添加全局组件配置：

import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
import { Link } from '@inertiajs/inertia-svelte';

export default {
  preprocess: vitePreprocess(),
  // 注册全局组件
  compilerOptions: {
    globals: {
      Link: Link
    }
  }
};

2. 配置完成后，任意Svelte组件中可直接使用<Link>标签：

<Link href="/dashboard">前往仪表盘</Link>

方式二：借助Vite自动导入实现全局可用 #

1. 先安装依赖插件：

npm install unplugin-auto-import --save-dev

2. 在vite.config.js中配置自动导入规则：

import { sveltekit } from '@sveltejs/kit/vite';
import autoImport from 'unplugin-auto-import/vite';

export default {
  plugins: [
    sveltekit(),
    autoImport({
      imports: [
        {
          '@inertiajs/inertia-svelte': ['Link']
        }
      ],
      dts: true // 可选，自动生成类型声明文件
    })
  ]
};

3. 之后所有Svelte组件都能直接使用Link组件，无需手动导入。

注意事项 #

• 确保已正确安装@inertiajs/inertia-svelte依赖：npm install @inertiajs/inertia-svelte
• 上述两种方式均兼容SvelteKit的服务端渲染（SSR）场景。

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