我正在用Vue.js 3，Vite.js构建我的项目。该应用程序在开发模式下(使用开发服务器时(运行良好。一旦我启动了build命令，Vite就会为我创建/dist目录，其中包含我的应用程序的构建。如果我运行预览命令(vite-preview(，它会毫无问题地开始预览我的构建。
问题在于一些来自Vue组件的图像。我的项目的所有图像都在src/assets目录中。
.
├── Attribution.txt
├── README.md
├── index.html
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
│ └── favicon.ico
├── src
│ ├── App.vue
│ ├── assets
│ │ ├── Temp.png
│ │ ├── bridge.png
│ │ ├── city-security.png
│ │ ├── credit-card.png
│ │ ├── deforestation.png
│ │ ├── eagle.png
│ │ ├── favicon
│ │ │ ├── android-chrome-192x192.png
│ │ │ ├── android-chrome-512x512.png
│ │ │ ├── apple-touch-icon.png
│ │ │ ├── favicon-16x16.png
│ │ │ ├── favicon-32x32.png
│ │ │ └── favicon.ico
│ │ ├── global-goals.png
│ │ ├── hall.png
│ │ ├── italian-flag.png
│ │ ├── machine-learning.png
│ │ ├── modern-architecture.png
│ │ ├── moon-festival.png
│ │ ├── people.png
│ │ ├── planet-earth.png
│ │ ├── police.png
│ │ ├── teamwork.png
│ │ ├── uk-flag.png
│ │ └── virtual.png
│ ├── components
│ │ ├── Button.vue
│ │ ├── Card.vue
│ │ ├── Column.vue
│ │ ├── Footer.vue
│ │ ├── MainContent.vue
│ │ ├── Navbar.vue
│ │ └── components-it
│ │ ├── Card-it.vue
│ │ ├── Footer-it.vue
│ │ └── Navbar-it.vue
│ ├── main.js
│ ├── router
│ │ └── index.js
│ ├── tailwind.css
│ └── views
│ ├── CitySecurity.vue
│ ├── Contribute.vue
│ ├── Credits.vue
│ ├── Goals.vue
│ ├── Home.vue
│ ├── It
│ │ ├── CitySecurity-it.vue
│ │ ├── Contribute-it.vue
│ │ ├── Credits-it.vue
│ │ ├── Goals-it.vue
│ │ ├── Home-it.vue
│ │ └── Municipality-it.vue
│ └── Municipality.vue
├── tailwind.config.js
└── vite.config.js
视图中的图像具有正确的路径，并且在构建中正确显示。但是components文件夹中的图像有一个问题：生成文件中的路径没有更改。
即
<template>
<Navbar />
<div class="container flex flex-col items-center py-20 font-bold mx-auto">
<h1 class="uppercase text-3xl">A new way to live the City</h1>
<img src="../assets/hall.png" alt="Town Hall" width="250" class="py-10" />
<p class="lg:w-1/2 text-justify leading-relaxed">
To improve the municipality livings being we tought about some ideas, that
are somehow able to improve the qol(Quality of life). One of the most
reliable problem that requires to be solved is the minimization of
burocracy, tryna to make things digital any sort of procedure. One of ours
ideas is to improve the mechanism of shifting around the city, by giving
cityzens public and shareble veichles to reduce pollution and the waste of
fuel.
</p>
<div class="grid lg:grid-cols-3 lg:gap-0 gap-10 place-items-center pt-20">
<div class="card container flex flex-col items-center justify-center">
<h1 class="uppercase text-xl">Digitalization</h1>
<img
class="py-5"
src="../assets/virtual.png"
alt="Digitalization"
width="100"
/>
<p class="lg:w-full text-justify lg:w-3/5 lg:leading-relaxed w-3/4">
Burocracy is so annoying, so we tought about how we can semplify it.
The Answer is... DIGITALIZATION! Everything's simpler when digital, so
our city is going to have a system for all of them.
</p>
</div>
<div class="card container flex flex-col items-center justify-center">
<h1 class="uppercase text-xl">Infrastructures Upgrading</h1>
<img
class="py-5"
src="../assets/bridge.png"
alt="Digitalization"
width="100"
/>
<p class="lg:w-full text-justify lg:w-3/5 lg:leading-relaxed w-3/4">
To make our city better, our city is going to invest in
infrastructures to let cityzens live their life much better. Better
"bridges" makes better people.
</p>
</div>
<div class="card container flex flex-col items-center justify-center">
<h1 class="uppercase text-xl">Innovative Learning</h1>
<img
class="py-5"
src="../assets/Machine-Learning.png"
alt="Digitalization"
width="100"
/>
<p class="lg:w-full text-justify lg:w-3/5 lg:leading-relaxed w-3/4">
Our city is going to offer a learning system to make everyone learn
about technologies and new innovation. The mind of a man is the most
precious part of him.
</p>
</div>
</div>
</div>
<Footer />
</template>
<script>
import Navbar from "../components/Navbar.vue";
import Footer from "../components/Footer.vue";
import Button from "../components/Button.vue";
export default {
name: "Municipality",
components: {
Navbar,
Footer,
Button,
},
};
</script>
<style></style>
这是我的观点之一。在构建中，所有img标记都将具有正确的路径(例如：/assets/imgName.randomNumbersAndString.png(。
但这种情况不会发生在组件中。
即Card.vue组件
<template>
<div
class="card container flex flex-col items-center justify-center pt-20 pb-20"
>
<a :href="`${link}`">
<img
:class="`${imgClass || 'py-5'}`"
:src="`./src/assets/${imgName}`"
:alt="`${imgAlt}`"
width="100"
/>
</a>
<p class="lg:w-full lg:w-3/5 lg:leading-relaxed w-3/4">{{ text }}</p>
</div>
</template>
<script>
export default {
name: "Card",
props: {
link: String,
imgClass: String,
imgName: String,
imgAlt: String,
text: String,
},
};
</script>
<style scoped></style>
Credits.vue查看
<template>
<Navbar />
<h1 class="uppercase lg:text-5xl text-2xl mx-auto text-center pt-20">
Images and Icons attributions
</h1>
<div class="grid lg:grid-cols-3 place-items-center lg:pb-10 mx-auto">
<Card
link="Hall icons created by Smashicons - Flaticon"
text="Hall icons created by Smashicons - Flaticon"
imgAlt="Hall vector representation"
imgName="hall.png"
/>
<Card
link="https://www.flaticon.com/free-icons/moon-festival"
text="Pokemon icons created by Roundicons Freebies - Flaticon"
imgAlt="Temp logo"
imgName="Temp.png"
/>
<Card
link="https://www.flaticon.com/free-icons/moon-festival"
text="Moon festival icons created by Flat Icons - Flaticon"
imgAlt="Moon vector representation"
imgName="moon-festival.png"
/>
<Card
link="https://www.flaticon.com/free-icons/digital"
text="Digital icons created by Freepik - Flaticon"
imgAlt="Digital vector representation"
imgName="virtual.png"
/>
<Card
link="https://www.flaticon.com/free-icons/tower-bridge"
text="Tower bridge icons created by Freepik - Flaticon"
imgAlt="Bridge vector representation"
imgName="bridge.png"
/>
<Card
link="https://www.flaticon.com/free-icons/machine-learning"
text="Machine learning icons created by Flat Icons - Flaticon"
imgAlt="Machine learning vector representation"
imgName="machine-learning.png"
/>
<Card
link="https://www.flaticon.com/free-icons/business-and-finance"
text="Business and finance icons created by Freepik - Flaticon"
imgAlt="City security vector"
imgName="city-security.png"
/>
<Card
link="https://www.flaticon.com/free-icons/credit-card"
text="Credit card icons created by Freepik - Flaticon"
imgAlt="Credit card vector"
imgName="credit-card.png"
/>
<Card
link="https://www.flaticon.com/free-icons/deforestation"
text="Deforestation icons created by Freepik - Flaticon"
imgAlt="Deforestation vector representation"
imgName="deforestation.png"
/>
<Card
link="https://www.flaticon.com/free-icons/eagle"
text="Eagle icons created by Freepik - Flaticon"
imgAlt="Eagle vector"
imgName="eagle.png"
/>
<Card
link="https://www.flaticon.com/free-icons/modern-architecture"
text="Modern architecture icons created by Freepik - Flaticon"
imgAlt="Modern architecture vector"
imgName="modern-architecture.png"
/>
<Card
link="https://www.flaticon.com/free-icons/environment"
text="Environment icons created by Freepik - Flaticon"
imgAlt="Earth planet vector"
imgName="planet-earth.png"
/>
</div>
<div class="container mx-auto flex flex-row items-center justify-center text-center">
<Card
link="https://www.flaticon.com/free-icons/police"
text="Police icons created by Freepik - Flaticon"
imgAlt="Police officer vector"
imgName="police.png"
/>
<Card
link="https://www.flaticon.com/free-icons/collaboration"
text="Collaboration icons created by Freepik - Flaticon"
imgAlt="Community vector"
imgName="teamwork.png"
/>
</div>
<Footer />
</template>
<script>
import Card from "../components/Card.vue";
import Navbar from "../components/Navbar.vue";
import Footer from "../components/Footer.vue";
import Button from "../components/Button.vue";
export default {
name: "Credits",
components: {
Navbar,
Footer,
Button,
Card,
},
};
</script>
<style scoped></style>
在这种情况下，当我将imgName传递到Card组件时，在构建文件中，映像的路径为/src/assets/name.png.
我该如何修复？
问题是，您将文件名作为属性传递给组件。然后，组件中的完整图像路径将从路径和变量文件名中导出。然而，这样的动态路径是不可能的，因为所有导入路径都需要在构建时定义。使用您的组件，理论上可以传递例如来自远程服务器的字符串或随机字符串作为文件名，因此Vite在构建期间没有机会找到这些图像。
不过，解决方案非常简单：不向组件传递部分路径(文件名(，只需将导入的图像作为属性直接传递即可。图像将自动解析为Vite可以解析的绝对文件路径。
这里有一个例子：
<template>
<Card :image="Teamwork" />
</template>
<script>
import Teamwork from '../../assets/teamwork.png';
export default {
setup: () => {
return { Teamwork };
}
};
</script>
使用API选项，还可以通过data或computed将图像传递到模板。使用TypeScript，您还需要为图像定义填充程序，以便导入图像。
您可以从任何vue组件使用@/assets来引用assets文件夹中的文件，而不是使用到assets文件夹的相对路径(..)。
例如，无论Vue组件嵌套有多深，这都应该起作用。
<img src="@/assets/images/name.png"/>
编辑：
正如@flydev所指出的，您必须这样配置vite-config：https://stackoverflow.com/a/66046200/3565182让它发挥作用。