Vite对静态资源的处理

1. 对图片的处理

如果你用下面的代码导入图片：

import img from './src/assets/images/1.png'
console.log(img);       // ./src/assets/images/1.png

就会得到图片的相对路径。这是因为vite默认把导入图片转换为图片的地址返回给你，其中上面的那行命令等于：

import a from '@assets/images/1.png?url'  // 默认是跟了?url的

那么像得到图片本身呢？就要利用参数了

import img from './src/assets/images/1.png?raw'

这样就返回的是图片本身的二进制数据了。

2. 对JSON对象的处理

会返回为什么呢？没错，自动将导入的json字符串转换为js对象并返回。代码实例：

import a from './src/assets/jsons/1.json' // --> 1.json的内容{"a":"aaaa"}
console.log(a)              // {a:"aaaa"}

3. 静态资源路径别名配置

相信越复杂的项目，静态文件嵌套就会越深，那么如上面的示例引入静态资源的写法就很抽象，繁杂。那么我们能可以利用vite.config.js提供的resolve来配置静态资源的别名路径。

import { defineConfig } from "vite";
import path from 'path';

export default defineConfig({
  resolve: {
    alias: {        // 静态资源的路径别名配置
      "@": path.resolve(__dirname, 'src'),
      "@assets": path.resolve(__dirname, "src/assets")
    }
  }
}

进行如上的配置就可以使用@或者@assets来代替前面的路径了。

比如上面的例子可以改为：

import a from '@assets/images/1.png'
import b from "@assets/jsons/1.json"

这样看来是不是好多了。避免了过长过深的文件路径。一目了然。