Relative Asset Urls Not Starting With Dot Don't Work
Introduction
In this article, we will discuss a bug in Vite where relative asset URLs not starting with a dot do not work. We will explore the issue, provide a reproduction, and discuss the system information and logs.
Describe the Bug
The bug occurs when trying to use a relative asset URL that does not start with a dot. For example, if we have an image file assets/vue.svg and we try to use it in our code like this:
<img src="assets/vue.svg" alt="Vue logo" />
We get the following error:
Failed to resolve import "assets/vue.svg" from "src/App.vue". Does the file exist?
This error is thrown because Vite is unable to resolve the import for the asset URL.
Reproduction
To reproduce this bug, you can create a new Vite project using the following command:
npm create vite@latest
Then, create a new file src/App.vue with the following content:
<template>
<img src="assets/vue.svg" alt="Vue logo" />
</template>
Next, create a new file public/assets/vue.svg with the following content:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm0 18c-4.4 0-8-3.6-8-8s3.6-8 8-8 8 3.6 8 8-3.6 8-8 8z" />
</svg>
Finally, run the following command to build the project:
npm run build
This will throw the error mentioned earlier.
System Info
Here is the system information for the project:
System:
OS: Linux 5.0 undefined
CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
Memory: 0 Bytes / 0 Bytes
Shell: 1.0 - /bin/jsh
Binaries:
Node: 18.20.3 - /usr/local/bin/node
Yarn: 1.22.19 - /usr/local/bin/yarn
npm: 10.2.3 - /usr/local/bin/npm
pnpm: 8.15.6 - /usr/local/bin/pnpm
npmPackages:
@vitejs/plugin-vue: ^5.2.1 => 5.2.1
vite: ^6.2.1 => 6.2.1
Logs
Here are the logs for the project:
vite:config config file loaded in 480.90ms +0ms
vite:env loading env files: [
vite:env '/home/projects/vitejs-vite-7n9nbztf/.env',
vite:env '/home/projects/vitejs-vite-7n9nbztf/.env.local',
vite:env '/home/projects/vitejs-vite-7n9nbztf/.env.production',
vite:env '/home/projects/vitejs-vite-7n9nbztf/.env.production.local'
vite:env ] +0ms
vite:env env files loaded in 0.65ms +1ms
vite:env using resolved env: {} +0ms
vite:config using resolved config: {
vite:config plugins: [
vite:config 'vite:build-metadata',
vite:config 'vite:watch-package-data',
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-helper',
vite:config 'vite:worker',
vite:config 'vite:asset',
vite:config 'vite:vue',
vite:config 'vite:wasm-fallback',
vite:config 'vite:define',
vite:config 'vite:css-post',
vite:config 'vite:build-html',
vite:config 'vite:worker-import-meta-url',
vite:config 'vite:asset-import-meta-url',
vite:config 'vite:force-systemjs-wrap-complete',
vite:config 'commonjs',
vite:config 'vite:data-uri',
vite:config 'vite:rollup-options-plugins',
vite:config 'vite:dynamic-import-vars',
vite:config 'vite:import-glob',
vite:config 'vite:build-import-analysis',
vite:config 'vite:esbuild-transpile',
vite:config 'vite:terser',
vite:config 'vite:manifest',
vite:config 'vite:ssr-manifest',
vite:config 'vite:reporter',
vite:config 'vite:load-fallback'
vite:config ],
vite:config build: {
vite:config target: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari14' ],
vite:config polyfillModulePreload: true,
vite:config modulePreload: { polyfill: true },
vite:config outDir: 'dist',
vite:config assetsDir: 'assets',
vite:config assetsInlineLimit: 4096,
vite:config sourcemap: false,
vite:config terserOptions: {},
vite:config rollupOptions: {},
vite:config commonjsOptions: { include: [ /node_modules/ ], extensions: [ '.js', '.cjs' ] },
vite:config dynamicImportVarsOptions: { warnOnError: true, exclude: [ /node_modules/ ] },
vite:config write: true,
vite:config emptyOutDir: null,
vite:config copyPublicDir: true,
vite:config manifest: false,
vite:config lib: false,
vite:config ssrManifest: false,
vite:config ssrEmitAssets: false,
vite:config reportCompressedSize: true,
vite:config chunkSizeWarningLimit: 500,
vite:config watch: null,
vite:config cssCodeSplit: true,
vite:config minify: 'esbuild',
vite:config ssr: false,
vite:config emitAssets: true,
vite:config createEnvironment: [Function: createEnvironment],
vite:config cssTarget: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari14' ],
vite:config cssMinify: true
vite:config },
vite:config resolve: {
vite:config externalConditions: [ 'node' ],
vite:config extensions: [ '.mjs', '.js', '.ts', '.jsx', '.tsx', '.json' ],
vite:config dedupe: [ 'vue' ],
vite:config noExternal: [],
vite:config external: [],
vite:config preserveSymlinks: false,
vite:config alias: [
vite:config {
vite:config find: /^\/?@vite\/env/,
vite:config replacement: '/@fs/home/projects/vitejs-vite-7n9nbztf/node_modules/vite/dist/client/env.mjs'
vite:config },
vite:config {
vite:config find: /^\/?@vite\/client/,
vite:config replacement: '/@fs/home/projects/vitejs-vite-7n9nbztf/node_modules/vite/dist/client/client.mjs'
vite:config }
vite:config ],
vite:config mainFields: [ 'browser', 'module', 'jsnext:main', 'jsnext' ],
vite:config conditions: [ 'module', 'browser', 'development|production' ],
vite:config builtins: []
vite:config },
vite:config define: {
vite:config __VUE_OPTIONS_API__: true,
vite:config __VUE_PROD_DEVTOOLS__: false,
vite:config __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: false
vite:config },
vite:config ssr: {
vite:config target: 'node',
vite:config optimizeDeps: {
vite:config esbuildOptions: { preserveSymlinks: false },
vite:config include<br/>
**Q&A: Relative Asset URLs Not Starting with Dot Don't Work**
=====================================================
**Q: What is the issue with relative asset URLs not starting with a dot?**
----------------------------------------------------------------
A: The issue is that Vite is unable to resolve the import for the asset URL. This is because Vite is designed to work with relative URLs that start with a dot, which indicates that the URL is relative to the current directory.
**Q: Why does Vite require relative URLs to start with a dot?**
---------------------------------------------------------
A: Vite requires relative URLs to start with a dot because it uses a technique called "aliasing" to resolve imports. When a relative URL starts with a dot, Vite knows that it needs to resolve the URL relative to the current directory. If the URL does not start with a dot, Vite will try to resolve it as an absolute URL, which can lead to errors.
**Q: How can I fix the issue with relative asset URLs not starting with a dot?**
-------------------------------------------------------------------------
A: To fix the issue, you can modify the relative URL to start with a dot. For example, if you have an image file `assets/vue.svg` and you want to use it in your code, you can modify the URL to `./assets/vue.svg`. This will tell Vite to resolve the URL relative to the current directory.
**Q: What if I have a lot of relative URLs that don't start with a dot? Do I need to modify all of them?**
-----------------------------------------------------------------------------------------
A: Yes, you will need to modify all of the relative URLs that don't start with a dot. However, you can also use a tool like a code search and replace to make the process easier.
**Q: Is there a way to configure Vite to work with relative URLs that don't start with a dot?**
-----------------------------------------------------------------------------------------
A: Yes, you can configure Vite to work with relative URLs that don't start with a dot by modifying the `resolve` option in your Vite configuration file. However, this is not recommended, as it can lead to errors and make your code harder to maintain.
**Q: What are some best practices for working with relative URLs in Vite?**
-------------------------------------------------------------------------
A: Some best practices for working with relative URLs in Vite include:
* Always starting relative URLs with a dot to indicate that they are relative to the current directory.
* Using a consistent naming convention for your assets and directories.
* Keeping your asset files organized and easy to find.
* Using a code search and replace tool to make it easier to modify relative URLs.
**Q: Where can I find more information about working with relative URLs in Vite?**
--------------------------------------------------------------------------------
A: You can find more information about working with relative URLs in Vite by checking out the official Vite documentation and the Vite community forums. You can also search for tutorials and guides online to help you learn more about working with relative URLs in Vite.