特点
Vite 对静态资源是开箱即用的。
无需做特殊的配置。
项目案例
项目结构
study-vite| -- src| -- assets| -- bbb.svg # 静态的svg图片资源| -- index.html # 主页面| -- main.js # 引入静态资源| -- package.json # 脚本配置| -- vite.config.js # vite 的配置文件，本案例中没有特殊的配置
代码
main.js （最主要的代码）
// 导入svg 的操作
import bbbSvg from './src/assets/bbb.svg'
// 打印看一下导入的是啥
console.log('bbbSvg : ',bbbSvg)
// js : 创建一个img 标签并插入到页面中
let bbbImg = document.createElement('img')
bbbImg.src = bbbSvg
document.body.append(bbbImg)html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body>展示vite对静态图片-svg 的支持<br><!--引入main.js --><script type="module" src="./main.js" ></script></body>
</html>
package.json
... 此处只展示 运行脚本的东西"scripts": {"dev": "vite",},
运行
运行命令
$ npm run dev
运行效果
源码中的svg 的路径已经自动补全了相对路径
