处理静态资源
图片加载
加载图片的几种场景
- 在
HTML中使用img标签来加载图片
html
<img src="xxx.png" alt="xxx">
- 在
CSS中通过background属性设置背景图
css
.home {
background: url("../xxx.png") no-repeat;
}
- 在
JavaScript中动态设置img标签的src
javascript
document.getElementById('home-img').src = './assets/xxx.png'
设置路径别名
- 可以通过设置
alias来统一引入路径
vite.config.js
javascript
import path from 'node:path'
/**
* @type {import('vite').UserConfig}
*/
const config = {
resolve: {
alias: {
'@assets': path.resolve(__dirname, 'src/assets')
}
}
}
export default config;
- 这样
Vite在遇到@assets路径的时候，会自动帮我们定位至根目录下的src/assets目录
TIP
alias别名配置不仅在JavaScript的import语句中生效，在CSS代码的@import和url导入语句中也同样生效
示例
- 项目结构如下:
shell
.
├── index.html
├── package.json
├── pnpm-lock.yaml
├── src
│ ├── assets
│ │ ├── image
│ │ │ ├── dog1.webp
│ │ │ ├── dog2.webp
│ │ │ ├── hsy.png
│ │ │ ├── star.svg
│ │ │ └── ysy.jpeg
│ │ ├── json
│ │ │ └── a.json
│ │ └── style
│ │ └── common.css
│ ├── main.css
│ └── main.js
└── vite.config.js
main.js
javascript
import dogImg from '@assets/image/dog1.webp'
import './main.css'
export const createElement = (elementClass, elementTag = 'div') => {
const element = document.createElement(elementTag)
element.classList.add(elementClass)
return element
}
export const $ = selector => document.querySelector(selector);
const rootEl = $('#root')
// 设置背景图
const bgImgBox = createElement('bg-img-box')
rootEl.insertAdjacentElement('beforeend', bgImgBox);
// 设置img标签
const img = createElement('img-dog', 'img')
img.src = dogImg
img.style.cssText = `width: 200px`
rootEl.insertAdjacentElement('beforeend', img);
// 测试 css 中通过 @import 引入的样式
const textBoldElement = createElement('text--bold')
textBoldElement.textContent = '我是加粗文案'
rootEl.insertAdjacentElement('beforeend', textBoldElement);
main.css
css
@import "@assets/style/common.css";
.bg-img-box {
width: 200px;
height: 200px;
background: url("@assets/image/dog1.webp") no-repeat;
background-size: cover;
}
assets/style/common.css
css
.text--bold {
font-weight: bold;
}
效果如下
JavaScript文件中使用别名解析后的结果
CSS文件中使用别名解析后的结果
- 可以看到，图片路径不管在
JavaScript还是CSS中都可以被正确解析(解析后的路径中的/表示项目跟路径)
SVG加载方式
- 如果直接通过
import star from '@assets/image/star.svg'这种方式加载svg，获取到的star是一个路径
javascript
import star from '@assets/image/star.svg'
console.log({ star }) // {star: '/src/assets/image/star.svg'}
- 有时候希望直接将
svg标签渲染到页面中，可以在引用的时候添加?raw后缀
javascript
import svgRaw from '@assets/image/star.svg?raw'
// 引入svg
console.log({ svgRaw })
const svgElBox = createElement('svg-content')
svgElBox.innerHTML = svgRaw
rootEl.insertAdjacentElement('beforeend', svgElBox)
这样就可以将svg标签渲染到页面上
JSON文件加载
Vite中内置了对json文件的解析
javascript
import userJson from '@assets/json/a.json'
// json
console.log(userJson) // {name: '张三', age: 22}
Vite还支持json命名导入，没用到的字段会进行tree shaking
javascript
import { age } from '@assets/json/a.json'
console.log({ age }) // 22
禁用命名导入
可以通过配置
json内的stringify字段为true来禁用命名导入这样会将
json的内容解析为exprot default JSON.parse("xxx")，这样会失去命名导入的能力，不过在数据量比较大的时候，可以优化解析性能
vite.config.js
javascript
import path from 'node:path'
/**
* @type {import('vite').UserConfig}
*/
const config = {
resolve: {
alias: {
'@assets': path.resolve(__dirname, 'src/assets')
}
},
json: {
stringify: true // 禁用json命名导入
}
}
export default config;
特殊资源后缀
Vite中引入静态资源时，也支持在路径最后加上一些特殊的query后缀，点击这里查看?url：表示获取资源的路径，如果只是想获取文件路径，可以使用这个?raw: 表示获取资源的字符串内容，如果想拿到资源的原始内容(如上面的svg)，可以使用这个?inline：表示资源强制内联，而不是打包成单独的文件
静态资源类型
- 在
Vite中常见的图像、媒体和字体文件类型被自动检测为资源。如果想让Vite支持其他格式的静态资源可以配置assetsInclude选项扩展内部列表。
javascript
import path from 'node:path'
/**
* @type {import('vite').UserConfig}
*/
const config = {
resolve: {
alias: {
'@assets': path.resolve(__dirname, 'src/assets')
}
},
json: {
// stringify: true // 禁用json命名导入
},
assetsInclude: ['**/*.gltf'], // 扩展支持的静态资源类型
}
export default config;
Vite支持的资源类型可点击这里查看