vite-plugin-vue
vite-plugin-vue copied to clipboard
Published
20 hours ago •
vitejs
vitejs
tilde alias not working in `img.src`
Describe the bug
use npm init vue and them chage the alias from @ to ~，then get this error!
// vite.config.ts
...
{
resolve:{
alias: {
'~': fileURLToPath(new URL('../src', import.meta.url)),
}
}
}
...
// App.vue
<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
// working!
import HelloWorld from '~/components/HelloWorld.vue'
</script>
<template>
// not working； [vite] Internal server error: Failed to resolve import "assets/logo.svg" from "src\App.vue". Does the file exist?
<img alt="Vue logo" class="logo" src="~/assets/logo.svg" width="125" height="125">
</template>
<style>
// working!
@import '~/assets/base.css';
</style>
use @ its all working!
Reproduction
1、use npm init vue
2、chage the alias from @ to ~，then get this error!
System Info
System:
OS: Windows 10 10.0.18363
CPU: (8) x64 Intel(R) Core(TM) i5-10210U CPU @ 1.60GHz
Memory: 3.60 GB / 15.74 GB
Binaries:
Node: 16.16.0 - C:\Program Files\nodejs\node.EXE
npm: 8.11.0 - C:\Program Files\nodejs\npm.CMD
Browsers:
Chrome: 103.0.5060.114
Edge: Spartan (44.18362.449.0)
Internet Explorer: 11.0.18362.1
npmPackages:
@vitejs/plugin-vue: ^2.3.3 => 2.3.3
@vitejs/plugin-vue-jsx: ^1.3.10 => 1.3.10
vite: ^2.9.12 => 2.9.14
Used Package Manager
pnpm
Logs
Click to expand!
// paste the log text here
vite:config using resolved config: {
vite:config root: 'D:/ReposSave/vue-awesome-template',
vite:config base: '/',
vite:config publicDir: 'D:\\ReposSave\\vue-awesome-template\\public',
vite:config cacheDir: 'D:\\ReposSave\\vue-awesome-template\\node_modules\\.vite',
vite:config plugins: [
vite:config 'vite:pre-alias',
vite:config 'alias',
vite:config 'vite:modulepreload-polyfill',
vite:config 'vite:resolve',
vite:config 'vite:optimized-deps',
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:vue-jsx',
vite:config 'vite:define',
vite:config 'vite:css-post',
vite:config 'vite:worker-import-meta-url',
vite:config 'vite:client-inject',
vite:config 'vite:import-analysis'
vite:config ],
vite:config resolve: {
vite:config dedupe: undefined,
vite:config alias: [ [Object], [Object], [Object] ],
vite:config mainFields: [ 'module', 'jsnext:main', 'jsnext' ],
vite:config extensions: [ '.mjs', '.js', '.ts', '.jsx', '.tsx', '.json' ]
vite:config },
vite:config css: { devSourcemap: false },
vite:config json: { namedExports: true, stringify: false },
vite:config logLevel: 'info',
vite:config clearScreen: true,
vite:config envDir: 'root',
vite:config envPrefix: 'VITE_',
vite:config server: {
vite:config preTransformRequests: true,
vite:config host: 'localhost',
vite:config port: 3000,
vite:config strictPort: false,
vite:config open: false,
vite:config fs: { strict: true, allow: [Array], deny: [Array] }
vite:config },
vite:config define: { __VUE_OPTIONS_API__: true, __VUE_PROD_DEVTOOLS__: false },
vite:config ssr: { external: [ 'vue', '@vue/server-renderer' ] },
vite:config esbuild: { include: /\.ts$/ },
vite:config configFile: 'D:/ReposSave/vue-awesome-template/vite.config.ts',
vite:config configFileDependencies: [
vite:config 'D:/ReposSave/vue-awesome-template/.vite-config/shared.conf.ts',
vite:config 'D:/ReposSave/vue-awesome-template/.vite-config/dev.conf.ts',
vite:config 'D:/ReposSave/vue-awesome-template/.vite-config/prod.conf.ts',
vite:config 'D:/ReposSave/vue-awesome-template/.vite-config/index.ts',
vite:config 'D:/ReposSave/vue-awesome-template/vite.config.ts'
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 server: {}
vite:config },
vite:config command: 'serve',
vite:config mode: 'development',
vite:config isWorker: false,
vite:config isProduction: false,
vite:config build: {
vite:config target: [ 'es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1' ],
vite:config polyfillModulePreload: true,
vite:config outDir: 'dist',
vite:config assetsDir: 'assets',
vite:config assetsInlineLimit: 4096,
vite:config cssCodeSplit: true,
vite:config cssTarget: [ 'es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1' ],
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 preview: {
vite:config port: undefined,
vite:config strictPort: false,
vite:config host: 'localhost',
vite:config https: undefined,
vite:config open: false,
vite:config proxy: undefined,
vite:config cors: undefined,
vite:config headers: undefined
vite:config },
vite:config env: { BASE_URL: '/', MODE: 'development', DEV: true, PROD: false },
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) {},
vite:config createResolver: [Function: createResolver],
vite:config optimizeDeps: {
vite:config esbuildOptions: { keepNames: undefined, preserveSymlinks: undefined }
vite:config },
vite:config worker: {
vite:config format: 'iife',
vite:config plugins: [
vite:config [Object], [Object],
vite:config [Object], [Object],
vite:config [Object], [Object],
vite:config [Object], [Object],
vite:config [Object], [Object],
vite:config [Object], [Object],
vite:config [Object], [Object],
vite:config [Object], [Object],
vite:config [Object]
vite:config ],
vite:config rollupOptions: {}
vite:config }
vite:config }
Validations
- [X] Follow our Code of Conduct
- [X] Read the Contributing Guidelines.
- [X] Read the docs.
- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- [X] Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
- [X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
- [X] The provided reproduction is a minimal reproducible example of the bug.
vue/compiler-sfc seems to remove the first ~ here.
https://github.com/vuejs/core/blob/8dcb6c7bbdd2905469e2bb11dfff27b58cc784b2/packages/compiler-sfc/src/templateTransformAssetUrl.ts#L116
https://github.com/vuejs/core/blob/8dcb6c7bbdd2905469e2bb11dfff27b58cc784b2/packages/compiler-sfc/src/templateUtils.ts#L22-L29
I'm not sure why this is done.
https://vue-loader.vuejs.org/guide/asset-url.html#transform-rules
Don't configure ~ as an alias.
https://vue-loader.vuejs.org/guide/asset-url.html#transform-rules Don't configure
~as an alias.
It looks like both @ and ~ are treated as module request. Why @ working and ~ not?
I try configure other symbol like & , the path &/assets/logo.svg returned as is.(https://vitejs.dev/config/shared-options.html#resolve-alias)
So, best practices its keep @ as alias?😂
https://vue-loader.vuejs.org/guide/asset-url.html#transform-rules Don't configure
~as an alias.It looks like both
@and~are treated as module request. Why@working and~not?I try configure other symbol like
&, the path&/assets/logo.svgreturned as is.(https://vitejs.dev/config/shared-options.html#resolve-alias)So, best practices its keep
@as alias?😂
But @antfu 's vite template vitesse does set '~' alias
