Svelte 4 + Vite自定义元素配置：生成无哈希静态单JS文件

修改你的vite.config.js，添加build配置项来控制输出文件名和打包规则，具体配置如下：

import {defineConfig} from 'vite'
import {svelte} from '@sveltejs/vite-plugin-svelte'

export default defineConfig({
    plugins: [svelte({
        compilerOptions: {
            customElement: true,
        }
    })],
    build: {
        emptyOutDir: true,
        rollupOptions: {
            output: {
                // 指定入口JS文件的静态名称，无哈希后缀
                entryFileNames: 'my-element.js',
                // 若有资源文件（如样式、图片），也指定无哈希名称（可选）
                assetFileNames: 'my-element.[ext]',
                // 生成适合浏览器直接引入的立即执行函数格式
                format: 'iife'
            },
            // 明确指定打包入口，确保只输出目标JS文件
            input: './src/main.js'
        }
    }
})

关键配置说明 #

• entryFileNames: 'my-element.js'：强制生成的入口JS文件使用你指定的静态名称，不会自动添加哈希后缀。
• assetFileNames：如果项目包含样式、图片等资源文件，该配置会让它们也使用无哈希的统一命名（根据需求选择是否添加）。
• format: 'iife'：生成适合浏览器环境直接引入的代码格式，避免模块化语法导致的加载问题。
• input: './src/main.js'：明确打包入口，确保只生成目标JS文件，多余的HTML文件不会被输出。

执行npm run build后，dist目录中会生成你指定名称的无哈希JS文件，可直接用于引入自定义元素。

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