Skip to content

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

Open
@suncohey

Description

@suncohey

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    p3-minor-bug 🔨An edge case that only affects very specific usage (priority)

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions