Vite -静态资源处理 - SVG格式的图片

特点

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>Documenttitle>
head>
<body>
     展示vite对静态图片-svg 的支持
    <br>
    
    <script type="module" src="./main.js" >script>
    
body>
html>

package.json

... 此处只展示 运行脚本的东西
  "scripts": {
    "dev": "vite",
  },

运行

运行命令

$ npm run dev

运行效果

Vite -静态资源处理 - SVG格式的图片_第1张图片

源码中的svg 的路径已经自动补全了相对路径
Vite -静态资源处理 - SVG格式的图片_第2张图片

你可能感兴趣的:(Vite,vite,静态资源,svg图片)