[Vite build error]Vue 3 typescript with vite build show error default is not exported 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)

我试过的方法：

导出 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 回购 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 build 的解决方案。

谢谢。

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

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

typescript

vue.js

vite