vite-plugin-vue
vite-plugin-vue copied to clipboard
vitejs
升级到5.0.11 后开发环境public下的图片无法正常展示 Vite4.5.1 版本正常
Describe the bug
vite.config.ts 配置如下： `import { fileURLToPath, URL } from 'node:url'; import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue';
const getFileURLToPath = (url: string): string => { return fileURLToPath(new URL(url, import.meta.url)); };
export default defineConfig({ publicDir: getFileURLToPath('./public'), // 公共静态资源 root: getFileURLToPath('./src/Project/bc_a_1'), base: '/h5_release_1/bc_a_1', envDir: getFileURLToPath('./'), // 用于加载 .env 文件的目录。可以是一个绝对路径，也可以是相对于项目根的路径。
plugins: [ vue(), ],
resolve: { alias: { '@': getFileURLToPath('./src') } },
server: { host: true, port: 8082, } });`
项目目录结构如下
在App.vue 引入 import HelloWorld from '@/components/HelloWorld.vue'
然后在子组件HelloWorld.vue 写入如下代码：
<template> <img src="/1.png" alt="" /> </template>
/1.png 在 public 目录下 这种情况下他不会正常显示
但是当我在 App.vue 顶级组件中写入 <img src="/1.png" alt="" /> 就可以正常显示，显示结果如下：
可以看出 src 的路径在顶级组件 和子组件中显示不一样
Vite4.5.1 是可以正常显示的
Reproduction
https://github.com/suncohey/vue3ye
Steps to reproduce
Run yarn followed by yarn dev
System Info
System:
OS: Windows 10 10.0.16299
CPU: (8) x64 Intel(R) Core(TM)2 Duo CPU T7700 @ 2.40GHz
Memory: 7.86 GB / 16.00 GB
Used Package Manager
yarn
Logs
No response
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.
Simplified reproduction: https://stackblitz.com/edit/github-aqwoky?file=src%2FProject%2Fbc_a_1%2FApp.vue
Not sure if this is the expected behavior For now only images in the root directory will be transformed. https://github.com/vitejs/vite-plugin-vue/blob/50cc9cd5d06c895d61d2404fa8d1b2a75d622fb4/packages/plugin-vue/src/template.ts#L140
