前端——测试与打包时静态资源引用路径

1.测试与打包构建目录说明

（1）说明：

•     public路径：/xx
  

•     绝对路径：/public/xx
  

•     相对路径：./xx
  

public路径与绝对路径说明，原理：

    在Vite中， / 开头的绝对路径默认可以访问到 public/ 目录下的内容，所以 /public/static/home/首页.png 和 /static/home/首页.png 都可以访问到本地资源。但是在打包时，Vite默认会原样保留绝对路径的引用地址，但不会保留public文件夹，即public下的static文件夹会被直接输出到dist/目录下，而没有public文件夹了。所以虽然这两种都可以访问到本地资源，但是考虑到默认的打包处理方式，还是要去除掉/public前缀才能保证打包之后也可以正常引入静态资源。

（2）总结：

• index.html放最外层,其他css、js、图片等可以放public中，也可以放src中；
• 不需要压缩的放入public，放入public中静态资源不会压缩，打包时直接复制到dist；
• 需要压缩的放入src，放入src中的静态资源会被压缩、修改名称等；
• 静态资源尽量放入src中，可以减小文件体积同时混淆源码；
• public中资源引用，建议使用public路径；
• src中资源引用，建议使用相对路径；

（3）

• src中资源引用： import时使用相对路径或绝对路径；
• public中资源引用：import时使用相对路径或绝对路径；

（4）

• html标签中引用资源:放入src或public，使用哪种路径均可；
• js代码中使用url加载静态资源：放入public文件夹，使用相对路径或public路径；

（5）测试引用css文件

import方式引用：
// import '/public/css/PropertyPanel.css'      //放入public 绝对路径    测试打包均ok
// import '/css/PropertyPanel.css'             //放入public public路径  测试失败
// import '../../public/css/PropertyPanel.css' //放入public 相对路径    测试打包均ok
// import '../css/PropertyPanel.css'           //放入src    相对路径    测试打包均ok
// import '/src/css/PropertyPanel.css'         //放入src    相对路径    测试打包均ok
js中url方式加载：
// loadCSSFile('/css/PropertyPanel.css')        //放入public，public路径 均ok
// loadCSSFile('../css/PropertyPanel.css')      //放入public，相对路径 均ok
// loadCSSFile('/public/css/PropertyPanel.css') //放入public，绝对路径 测试ok 打包失败
// loadCSSFile('../css/PropertyPanel.css')      //放入src 相对路径 ，测试失败
// loadCSSFile('/src/css/PropertyPanel.css')    //放入src 绝对路径 ，测试ok 打包失败

2.引入.css文件的方式

(1) 在html中通过link引入；

(2) 在另一个.css文件中通过@import '/css/xx.css'引入； (测试public路径、相对、绝对路径都没成功)

(3) 在js模块中通过 import '/css/xx.css' 引入；

(3) 在js代码中通过创建link标签设置href引入；

3. 图片资源动态引入

Vite打包只会处理静态src路径，动态src路径只会原样保留。

(1)import引入

需要动态指定的资源很少，就那么几个直接使用import 引入图片资源，然后添加即可；

(2)放入public

需要动态指定的资源非常多，图片放入public，通过public路径引入，然后通过js代码动态设置src即可；

(3) import.meta.glob API

新需求需要动态指定的资源非常多，同时项目是老项目，不能随意更改静态资源路径:

    可以尝试Vite官方提供的 import.meta.glob API

    这个方法一般用于批量引入js或者ts文件，但实际上这个方法就是 很多import语句的集合而已，import是可以引入图片的，所以import.meta.glob 也同样可以引入图片资源，只不过需要加入配置项 as:'url' 就可以了。

    通常来说，我们可以用ES提供的 import 来代替 commonJS 的require()，在webpack中，动态引入静态文件可以这样：

<img :src="require(imgPath)" />

   而在Vite中，我们虽然不能直接使用require()，但可以这样批量引入静态资源：

<template>
  <div>
    <img
      v-for="(image, index) in images"
      :key="index"
      :src="image"
      alt="dynamic image"
      width="100"
      height="100"
    />
  </div>
</template>
 
<script setup lang="ts">
import { ref } from 'vue'
 
const obj = import.meta.glob('@/assets/*.{png,jpg}', {
  as: 'url'
})
 
const images = ref<string[]>([])
 
for (const key in obj) {
  obj[key]().then((res) => {
    images.value.push(res)
  })
}
</script>

这样一来，Vite就会帮我们自动import对应的静态资源，所以即使在线上环境，我们也可以展示动态指定路径的静态资源了。

但是要注意：vite提供的这个批量import的方法不能保证每次返回时都是按照顺序返回的，要进行额外处理才行，思路是：把 import.meta.glob 返回的数组，通过includes方法检索key值，然后按照自己需要的顺序重排原数组，或者新建一个新数组依序push元素。