DEV Community
·
Vite如何解析相对路径和绝对路径
💡
原文英文，约900词，阅读约需4分钟。
📝
内容提要
在使用Vite处理静态资源时，绝对路径以"/"开头，指向根目录，而相对路径基于当前文件位置。建议在public/中使用绝对路径，在src/中使用相对路径，并测试vite dev和vite build以确保资源加载一致性。
🎯
关键要点
- 在使用Vite处理静态资源时，绝对路径以'/'开头，指向根目录。
- 相对路径基于当前文件位置，建议在public/中使用绝对路径，在src/中使用相对路径。
- Vite构建项目时，会将应用编译、打包并优化到dist/文件夹中。
- dist/文件夹包含最终的优化过的JS和CSS文件，以及从public/文件夹复制的静态资源。
- 绝对路径在开发环境和生产环境中都能正确解析，而相对路径可能会导致问题。
- 相对路径在src/文件夹内引用文件时效果良好，但无法访问public/中的文件。
- 使用绝对路径可以确保在所有环境中资源加载的一致性。
- 建议在开发和生产环境中都进行测试，以确保资源加载正常。
❓
延伸问答
Vite中的绝对路径和相对路径有什么区别？
绝对路径以'/'开头，指向根目录，而相对路径基于当前文件位置。
在Vite中，如何确保资源在不同环境中加载一致？
使用绝对路径可以确保在所有环境中资源加载的一致性。
为什么在开发环境中相对路径可能会导致问题？
相对路径在src/文件夹内引用文件时效果良好，但无法访问public/中的文件，可能导致文件未找到。
Vite的dist/文件夹包含哪些内容？
dist/文件夹包含最终的优化过的JS和CSS文件，以及从public/文件夹复制的静态资源。
在Vite中，如何正确引用public/中的文件？
应使用绝对路径，例如'/fonts/icon-font.woff'，以确保正确引用public/中的文件。
Vite构建项目时会发生什么？
Vite会编译、打包并优化应用到一个名为dist/的生产就绪文件夹中。
➡️
