静态资源

vite对大多数静态资源都是开箱即用的

图片

导入图片可以直接获取图片路径：

1
2
import imageUrl from "./src/assets/images/1.webp"
console.log(imageUrl) //为图片路径

json

导入json可以直接得到反序列化后的对象：

1
2
3
import adminConfig from "./src/assets/jsons/adminConfig.json"
console.log(adminConfig)//得到一个反序列化的对象
console.log(adminConfig.delete)

这种写法在生产环境性能差并且非常臃肿，因为导入了一个对象中的全部内容，不利于摇树优化。
在生产环境应尽量控制导入的数量，可以使用以下写法：

1
2
import { add } from "./src/assets/jsons/adminConfig.json"
console.log(add)

svg

svg源码如下：

1
2
3
<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 500">
    <path d="M117.1 256.1c-25.8 3.7-84 13.7-100.9 30.6-21.9 21.9-21.5 57.9.9 80.3s58.3 22.8 80.3.9C114.3 351 124.3292.8 128 267c.8-6.4-4.6-11.8-10.9-10.9zm506.7 30.6c-16.9-16.9-75.1-26.9-100.9-30.6-6.3-.9-11.7 4.5-10.8 10.8 3.725.8 13.7 84 30.6 100.9 21.9 21.9 57.9 21.5 80.3-.9 22.3-22.3 22.7-58.3.8-80.2zm-126.6 61.7C463.8 412.3 396.9 456320 456c-76.9 0-143.8-43.7-177.2-107.6-12.5 37.4-25.2 43.9-28.3 46.5C159.1 460.7 234.5 504 320 504s160.9-43.3 2055-109.1c-3.2-2.7-15.9-9.2-28.3-46.5zM122.7 224.5C137.9 129.2 220.5 56 320 56c99.5 0 182.1 73.2 197.3 168.5 2.1-.25.2-2.4 49.5 7C554.4 106 448.7 8 320 8S85.6 106 73.2 231.4c44.5-9.4 47.1-7.2 49.5-6.9zM320 400c51.9 0 115.3-32.9123.3-80 1.7-9.9-7.7-18.5-17.7-15.3-25.9 8.3-64.4 13.1-105.6 13.1s-79.6-4.8-105.6-13.1c-9.8-3.1-19.4 5.3-17.7 153 8 47.1 71.4 80 123.3 80zm130.3-168.3c3.6-1.1 6-4.5 5.7-8.3-3.3-42.1-32.2-71.4-56-71.4s-52.7 29.3-56 71.4c-.3 37 2.1 7.2 5.7 8.3 3.5 1.1 7.4-.5 9.3-3.7l9.5-17c7.7-13.7 19.2-21.6 31.5-21.6s23.8 7.9 31.5 21.6l9.5 17c2.1 3.6 62 4.6 9.3 3.7zM240 189.4c12.3 0 23.8 7.9 31.5 21.6l9.5 17c2.1 3.7 6.2 4.7 9.3 3.7 3.6-1.1 6-4.5 5.7-8.3-3.3-421-32.2-71.4-56-71.4s-52.7 29.3-56 71.4c-.3 3.7 2.1 7.2 5.7 8.3 3.5 1.1 7.4-.5 9.3-3.7l9.5-17c7.7-13.8 19.2-21.631.5-21.6z"></path>
</svg>

可以将svg的源代码直接导入并写在页面某个元素的innerHtml上，想要修改svg图片的颜色可以采用以下写法：

1
2
3
4
5
6
7
8
9
import svgUrl from "@assets/svgs/laugh.svg?url"//得到一个指向svg图片的地址
import svgRaw from "@assets/svgs/laugh.svg?raw"//得到svg图片的源代码
document.body.innerHTML=svgRaw
console.log(svgUrl)
console.log(svgRaw)
let svgImg = document.getElementsByTagName("svg")[0]
svgImg.onmouseenter=function(){
    this.style.fill = "red"
}

别名配置

有没有觉得导入一个文件特别的费劲，vite提供了简化导入路径的方法，只需要做一点配置：

1
2
3
4
5
6
7
//在vite.config.js中添加以下配置
resolve:{
  alias:{
    "@":path.resolve(__dirname,"./src"),//用@符号表示src目录
    "@assets":path.resolve(__dirname,"./src/assets")
  }
}

在需要用到的地方这样写就行：

1
2
import imageUrl from "@assets/images/1.webp"
console.log(imageUrl)

静态资源打包

文件名变了

vite打包后默认生成一个名为dist的文件夹，里面包含了index.html和assets文件夹，assets文件夹内有许多我们使用到的静态文件（js、css、图片等），不难发现打包后文件的文件名添加了哈希值，这是为了解决浏览器缓存的问题（当访问了名字一样的静态文件，浏览器就会走缓存，每次打包使用不同的hash值就可以解决浏览器缓存的问题）。

构建时配置策略

vite.config.js中添加以下配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
build:{
  //vite在打包时使用了rollup，所以通过配置rollup就可以更改构建时配置
  rollupOptions:{
    //控制输出
    output:{
      //配置静态文件的命名格式
      assetFileNames:"[hash].[name].[ext]",
    }
  },
  //有些图片非常小，生成单独的文件会浪费体积，当图片大小小于该值时会把图片变成base64字符
  assetsInlineLimit:4096,
  //打包后文件夹的名字
  outDir:"testDist",
  //打包后静态文件文件夹的名字
  assetsDir:"testAssets"
}