I'm having the same problem as in the question: Vue 3 + Vite image URL becomes undefined after build
I can't deploy my project and keep images working. It just appears as undefined.
I tried the solution to set the build target to 'es2020', but it doesnt work. I tried to recreated the project and reinstall everything.
My dependencies:
"dependencies": {
"@headlessui/vue": "^1.5.0",
"@heroicons/vue": "^1.0.6",
"@vue-hero-icons/outline": "^1.7.2",
"flowbite": "^1.4.5",
"vue": "^3.2.25",
"vue-virtual-scroller": "^2.0.0-alpha.1"
},
"devDependencies": {
"@vitejs/plugin-vue": "^2.3.1",
"autoprefixer": "^10.4.4",
"postcss": "^8.4.12",
"tailwindcss": "^3.0.24",
"vite": "^2.9.9"
}
My vite config file
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue()
],
optimizeDeps: {
esbuildOptions: {
target: "es2020"
}
},
build: {
target: "es2020"
}
})
My component
<template>
<img :id="`image-${uuid}-${character}`" class="character-medal" :src="getImageUrl()">
<div :id="`tooltip-${uuid}-${character}`" role="tooltip" class="inline-block absolute invisible z-10 py-2 px-3 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 transition-opacity duration-300 tooltip dark:bg-gray-700">
{{ character }}
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</template>
<script>
export default {
props: {
character: {
type: String,
default: ''
}
},
data() {
return {
uuid: Math.random(),
tooltip: ''
}
},
methods: {
getImageUrl() {
return new URL(`../assets/images/characters_medal/${this.character}.png`, import.meta.url).href
}
},
mounted() {
const targetEl = document.getElementById(`tooltip-${this.uuid}-${this.character}`);
const triggerEl = document.getElementById(`image-${this.uuid}-${this.character}`);
this.tooltip = new Tooltip(targetEl, triggerEl, { placement: 'bottom' });
}
}
</script>
npx vite build --debug
vite:config bundled config file loaded in 37.71ms +0ms
vite:config using resolved config: {
vite:config plugins: [
vite:config 'vite:build-metadata',
vite:config 'alias',
vite:config 'vite:modulepreload-polyfill',
vite:config 'vite:resolve',
vite:config 'vite:html-inline-proxy',
vite:config 'vite:css',
vite:config 'vite:esbuild',
vite:config 'vite:json',
vite:config 'vite:wasm',
vite:config 'vite:worker',
vite:config 'vite:asset',
vite:config 'vite:vue',
vite:config 'vite:define',
vite:config 'vite:css-post',
vite:config 'vite:build-html',
vite:config 'vite:worker-import-meta-url',
vite:config 'vite:watch-package-data',
vite:config 'commonjs',
vite:config 'vite:data-uri',
vite:config 'rollup-plugin-dynamic-import-variables',
vite:config 'vite:asset-import-meta-url',
vite:config 'vite:build-import-analysis',
vite:config 'vite:esbuild-transpile',
vite:config 'vite:terser',
vite:config 'vite:reporter',
vite:config 'vite:load-fallback'
vite:config ],
vite:config optimizeDeps: {
vite:config esbuildOptions: {
vite:config keepNames: undefined,
vite:config preserveSymlinks: undefined,
vite:config target: 'es2020'
vite:config }
vite:config },
vite:config build: {
vite:config target: 'es2020',
vite:config polyfillModulePreload: true,
vite:config outDir: 'dist',
vite:config assetsDir: 'assets',
vite:config assetsInlineLimit: 4096,
vite:config cssCodeSplit: true,
vite:config cssTarget: 'es2020',
vite:config sourcemap: false,
vite:config rollupOptions: {},
vite:config minify: 'esbuild',
vite:config terserOptions: {},
vite:config write: true,
vite:config emptyOutDir: null,
vite:config manifest: false,
vite:config lib: false,
vite:config ssr: false,
vite:config ssrManifest: false,
vite:config reportCompressedSize: true,
vite:config chunkSizeWarningLimit: 500,
vite:config watch: null,
vite:config commonjsOptions: { include: [Array], extensions: [Array] },
vite:config dynamicImportVarsOptions: { warnOnError: true, exclude: [Array] }
vite:config },
vite:config define: { __VUE_OPTIONS_API__: true, __VUE_PROD_DEVTOOLS__: false },
vite:config ssr: { external: [ 'vue', '@vue/server-renderer' ] },
vite:config configFile: 'C:/Users/leohi/OneDrive/Documentos/gla-weekly-rotation/vite.config.js',
vite:config configFileDependencies: [
vite:config 'C:/Users/leohi/OneDrive/Documentos/gla-weekly-rotation/vite.config.js'
vite:config ],
vite:config inlineConfig: {
vite:config root: undefined,
vite:config base: undefined,
vite:config mode: undefined,
vite:config configFile: undefined,
vite:config logLevel: undefined,
vite:config clearScreen: undefined,
vite:config build: {}
vite:config },
vite:config root: 'C:/Users/leohi/OneDrive/Documentos/gla-weekly-rotation',
vite:config base: '/',
vite:config resolve: { dedupe: undefined, alias: [ [Object], [Object] ] },
vite:config publicDir: 'C:\\Users\\leohi\\OneDrive\\Documentos\\gla-weekly-rotation\\public',
vite:config cacheDir: 'C:\\Users\\leohi\\OneDrive\\Documentos\\gla-weekly-rotation\\node_modules\\.vite',
vite:config command: 'build',
vite:config mode: 'production',
vite:config isWorker: false,
vite:config isProduction: true,
vite:config server: {
vite:config preTransformRequests: true,
vite:config fs: { strict: true, allow: [Array], deny: [Array] }
vite:config },
vite:config preview: {
vite:config port: undefined,
vite:config strictPort: undefined,
vite:config host: undefined,
vite:config https: undefined,
vite:config open: undefined,
vite:config proxy: undefined,
vite:config cors: undefined,
vite:config headers: undefined
vite:config },
vite:config env: { BASE_URL: '/', MODE: 'production', DEV: false, PROD: true },
vite:config assetsInclude: [Function: assetsInclude],
vite:config logger: {
vite:config hasWarned: false,
vite:config info: [Function: info],
vite:config warn: [Function: warn],
vite:config warnOnce: [Function: warnOnce],
vite:config error: [Function: error],
vite:config clearScreen: [Function: clearScreen],
vite:config hasErrorLogged: [Function: hasErrorLogged]
vite:config },
vite:config packageCache: Map(0) { set: [Function (anonymous)] },
vite:config createResolver: [Function: createResolver],
vite:config worker: {
vite:config format: 'iife',
vite:config plugins: [
vite:config [Object], [Object], [Object],
vite:config [Object], [Object], [Object],
vite:config [Object], [Object], [Object],
vite:config [Object], [Object], [Object],
vite:config [Object], [Object], [Object],
vite:config [Object], [Object], [Object],
vite:config [Object], [Object], [Object],
vite:config [Object], [Object], [Object],
vite:config [Object]
vite:config ],
vite:config rollupOptions: {}
vite:config }
vite:config } +13ms
vite v2.9.9 building for production...
✓ 62 modules transformed.
dist/assets/favicon.5e37544b.png 26.87 KiB
dist/assets/arlong.2760ac3d.png 18.93 KiB
dist/assets/bartolomeo.58541cad.png 17.95 KiB
dist/assets/basil hawkins.60282c5f.png 16.88 KiB
dist/assets/bastille.901d5f58.png 19.67 KiB
dist/assets/brook.a0320201.png 16.10 KiB
dist/assets/bellamy.50434afb.png 17.84 KiB
dist/assets/capone bege.9bdb772f.png 18.09 KiB
dist/assets/crocodile.0509e664.png 17.47 KiB
dist/assets/carrot.560b1d07.png 19.42 KiB
dist/assets/dalmatian.0ff9507f.png 22.62 KiB
dist/assets/eustass kid.e20cf94b.png 22.30 KiB
dist/assets/franky.8446990e.png 17.73 KiB
dist/assets/hina.cd03d7ba.png 18.74 KiB
dist/assets/jesus burgess.d239542a.png 18.89 KiB
dist/assets/jewelry bonney.11975374.png 18.56 KiB
dist/assets/killer.8289e977.png 19.43 KiB
dist/assets/koala.210f0ff9.png 18.04 KiB
dist/assets/leo.3f0cf474.png 15.60 KiB
dist/assets/monkey d. luffy.69fd8117.png 15.56 KiB
dist/assets/nami.95860fae.png 16.04 KiB
dist/assets/nico robin.5a7305eb.png 16.15 KiB
dist/assets/perona.e97262a9.png 22.83 KiB
dist/assets/rebecca.75a5c359.png 17.80 KiB
dist/assets/roronoa zoro.f73348d2.png 15.09 KiB
dist/assets/ryuma.0dcaeebc.png 21.77 KiB
dist/assets/scratchmen apoo.c39ea4ce.png 19.41 KiB
dist/assets/smoker.3b179a23.png 22.59 KiB
dist/assets/tony tony chopper.1727f51f.png 17.92 KiB
dist/assets/trafalgar d. law.e74dfd8c.png 19.38 KiB
dist/assets/urouge.589714ff.png 16.43 KiB
dist/assets/usopp.c4a2e485.png 17.98 KiB
dist/assets/van augur.d0ecd6d8.png 20.97 KiB
dist/assets/vinsmoke ichiji.4660741a.png 18.18 KiB
dist/assets/vinsmoke niji.f09a7196.png 19.57 KiB
dist/assets/vinsmoke reiju.b602f44a.png 18.91 KiB
dist/assets/vinsmoke sanji.befea366.png 17.65 KiB
dist/assets/vinsmoke yonji.8b10fded.png 18.24 KiB
dist/assets/x drake.d8027ed8.png 19.39 KiB
dist/index.html 0.65 KiB
dist/assets/index.295b693b.css 27.61 KiB / gzip: 5.50 KiB
dist/assets/index.fcd8e6db.js 192.48 KiB / gzip: 55.40 KiB
