[Vite build error]Vue 3 typescript with vite build show error default is not export by <file>

Question

我正在构建一个 vue 3 ts 项目。运行vite没问题，构建 vite build --debug项目报错。

错误信息显示如下。

error during build:
Error: 'default' is not exported by src\env.d.ts, imported by src\infrastructure\seedwork\imageUrlFormatter.ts
    at error (Projects\vite\vite-user\node_modules\rollup\dist\shared\rollup.js:160:30)

我试过的方法：

1. 在 env.d.ts 中导出默认值

declare const imageUrlFormatter: any;
export default imageUrlFormatter;

env.d.ts 中的错误消失了，但会显示在其他文件中，例如 main.ts。即使我添加了上面的声明，它也会继续显示在下一个文件中。

下面是我的助手代码

// imageUrlFormatter.ts

function imageUrlFormatter(url: string) {
    return new URL(`/src/${url}`, import.meta.url).href
}

export { imageUrlFormatter }

这是我的 tsconfig.json

{
    "compilerOptions": {
        "target": "esnext",
        "useDefineForClassFields": true,
        "module": "esnext",
        "moduleResolution": "node",
        "strict": true,
        "jsx": "preserve",
        "sourceMap": true,
        "resolveJsonModule": true,
        "esModuleInterop": true,
        "lib": [
            "esnext",
            "dom"
        ],
        "typeRoots": [
            "./types"
        ],
        "paths": {
            "@/*": [
                "./src/*"
            ],
            "views/*": [
                "./src/views/*"
            ],
            "seedwork/*": [
                "./src/infrastructure/seedwork/*"
            ],
            "model/*": [
                "./src/infrastructure/model/*"
            ]
        },
    },
    "include": [
        "src/**/*.ts",
        "src/**/*.d.ts",
        "src/**/*.tsx",
        "src/**/*.vue"
    ]
}

这是我的 vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { VitePWA } from 'vite-plugin-pwa'
import path from 'path'
import commonjs from '@rollup/plugin-commonjs';
// https://vitejs.dev/config/
export default defineConfig({
    plugins: [vue(),
    VitePWA(
        {
            strategies: 'injectManifest',
            registerType: 'autoUpdate',
            includeAssets: ['favicon.svg', 'favicon.ico', 'robots.txt', 'apple-touch-icon.png'],
            manifest: {
                name: 'Name of your app',
                short_name: 'Short name of your app',
                description: 'Description of your app',
                theme_color: '#ffffff',
                icons: [
                    {
                        src: 'pwa-192x192.png',
                        sizes: '192x192',
                        type: 'image/png',
                    },
                    {
                        src: 'pwa-512x512.png',
                        sizes: '512x512',
                        type: 'image/png',
                    },
                    {
                        src: 'pwa-512x512.png',
                        sizes: '512x512',
                        type: 'image/png',
                        purpose: 'any maskable',
                    }
                ]
            }
        }
    ), commonjs({
        ignoreDynamicRequires: true
    })],
    resolve: {
        alias: {
            '~/': `${path.resolve(__dirname, 'src')}/`,
            'vue': '@vue/runtime-dom',
            '@': path.resolve('src'),
            'views': path.resolve('src/views'),
            '@components': path.resolve('src/@components'),
            'seedwork': path.resolve('src/infrastructure/seedwork'),
            'model': path.resolve('src/infrastructure/model'),
            "assets": path.resolve(__dirname, "/src/assets"),
            "~assets": path.resolve(__dirname, "/src/assets")
        }
    },
})

我尝试搜索上面的错误，但无法理解这是什么意思，任何可以帮助并让我知道这个错误是否显示如何进行更好调试的人？谢谢你。

ps：我创建了一个较小的项目来重现我的错误。这是github repo https://github.com/Arios509/vite-test

Answer 1

原来错误是由于imageUrlFormatter。

使用vite时，加载图片时会出现问题。因此我创建了一个 imageUrlFormatter 助手来解析路径。

我将 imageUrlFormatter 的代码修改为

const imageUrlFormatter = (url: string) => {
    return `src/${url}`;
}
export { imageUrlFormatter }

然后就可以了。

我还为这样的解析路径更新了vite.config.ts。

...
resolve: {
        alias: {
 ...
            "assets": resolve(__dirname, "src/assets"),
            "~assets": resolve(__dirname, "/src/assets"),
        }
    },

错误提示从来都不是根本原因，希望vite build 能提供更多相关信息。因为当正常运行vite 时，直到它需要构建时才可以。

Ps：构建成功并部署后，此方法无法覆盖。我删除了这个帮助程序，然后改为为每个图像更改为 new URL()。无论如何，我仍然想看看是否有人可以提供帮助并建议使用 vite 构建的更好解决方案。

谢谢。