Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

升级到5.0.11 后开发环境public下的图片无法正常展示 Vite4.5.1 版本正常 #337

Open
7 tasks done
suncohey opened this issue Jan 10, 2024 · 2 comments
Open
7 tasks done
Labels
p3-minor-bug 🔨 An edge case that only affects very specific usage (priority)

Comments

@suncohey
Copy link

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,
}
});`

项目目录结构如下
1

在App.vue 引入 import HelloWorld from '@/components/HelloWorld.vue'
然后在子组件HelloWorld.vue 写入如下代码:
<template> <img src="/1.png" alt="" /> </template>

/1.png 在 public 目录下 这种情况下他不会正常显示

2

但是当我在 App.vue 顶级组件中写入 <img src="/1.png" alt="" /> 就可以正常显示,显示结果如下:
3

可以看出 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

@sapphi-red sapphi-red transferred this issue from vitejs/vite Jan 10, 2024
@sapphi-red
Copy link
Member

Simplified reproduction: https://stackblitz.com/edit/github-aqwoky?file=src%2FProject%2Fbc_a_1%2FApp.vue

@sapphi-red sapphi-red added p3-minor-bug 🔨 An edge case that only affects very specific usage (priority) and removed pending triage labels Jan 10, 2024
@yoyo837
Copy link

yoyo837 commented Jan 15, 2024

Possibly related fixes #326

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
p3-minor-bug 🔨 An edge case that only affects very specific usage (priority)
Projects
None yet
Development

No branches or pull requests

3 participants