当前位置：首页 > news >正文

vite静态资源处理，处理vite项目中src和url路径问题

news 来源：原创 2024/9/20 8:05:31

将资源引入为 URL

服务时引入一个静态资源会返回解析后的公共路径：

// imgUrl的绝对路径为/img.png
import imgUrl from './img.png'
document.getElementById('hero-img').src = imgUrl

例如，imgUrl 在开发时会是 /img.png，在生产构建后会是 /assets/img.2d8efhg.png。

行为类似于 Webpack 的 file-loader。区别在于导入既可以使用绝对公共路径（基于开发期间的项目根路径），也可以使用相对路径。

url() 在 CSS 中的引用也以同样的方式处理。
如果 Vite 使用了 Vue 插件，Vue SFC 模板中的资源引用都将自动转换为导入。

new URL(url, import.meta.url)

import.meta.url 是一个 ESM 的原生功能，会暴露当前模块的 URL。将它与原生的 URL 构造器组合使用，在一个 JavaScript 模块中，通过相对路径我们就能得到一个被完整解析的静态资源 URL：

const imgUrl = new URL('./img.png', import.meta.url).hrefdocument.getElementById('hero-img').src = imgUrl

这在现代浏览器中能够原生使用 - 实际上，Vite 并不需要在开发阶段处理这些代码！

在生产构建时，Vite 才会进行必要的转换保证 URL 在打包和资源哈希后仍指向正确的地址。

实例

1.引入图片

开发环境

import myImg from '../assets/img/login-bg.jpg';
console.log(myImg); // /src/assets/img/login-bg.jpgconst imgUrl = new URL('../assets/img/login-bg.jpg', import.meta.url).href;
console.log(imgUrl); // http://localhost:8087/src/assets/img/login-bg.jpg'

生产环境

import myImg from '../assets/img/login-bg.jpg';
console.log(myImg); // /assets/login-bg-OCgX7bcw.jpgconst imgUrl = new URL('../assets/img/login-bg.jpg', import.meta.url).href;
console.log(imgUrl); // http://localhost:8080/assets/login-bg-OCgX7bcw.jpg'

开发环境和生产环境下图片均为公共路径。

2.为img元素添加src

vue模板中：

<img ref="myImg" src="../assets/img/login-bg.jpg"> // 相对路径
<img ref="myImg" src="/src/assets/img/login-bg.jpg"> // 绝对路径
<img ref="myImg" :src="myImg"> // 公共路径
<img ref="myImg" :src="imgUrl"> // 公共路径

以上四种方式在开发和生产环境下都可以正常工作，因为Vue SFC 模板中的资源引用都将自动转换为导入，所以最终用的是解析后的公共路径。

非vue模板中：

myImg.value.src = '../assets/img/login-bg.jpg';  // dev和product都不可以
myImg.value.src = '/src/assets/img/login-bg.jpg'; // dev下可以，product下不可以
myImg.value.src = myImg; // 可以
myImg.value.src = imgUrl; // 可以

这种写法不会触发解析。

第一种使用相对路径即使在dev环境下也不行。

第二种在product环境下因为打包后dist目录不同于开发环境目录，所以不行。

只有第三种和第四种方式在开发和生产环境下才能正常工作。

3.在css中使用url

css中

.login-footer{background-image: url(../assets/img/login-bg.jpg);background-image: url(/src/assets/img/login-bg.jpg);
}

两种方式在开发和生产环境下都可以正常工作，因为url()在 CSS 中的引用也以同样的方式处理，所以最终用的是解析后的公共路径。

vue模板中通过v-bind:style绑定css

<div class="login-footer" style="width: 50px; height: 50px;":style="`background-image: url(../assets/img/login-bg.jpg)`"   // dev和product都不可以:style="`background-image: url(/src/assets/img/login-bg.jpg)`" // dev下可以，product下不可以:style="`background-image: url(${myImg})`"  // 可以:style="`background-image: url(${imgUrl})`" // 可以
></div>

这种写法不会触发解析，所以结果跟上面非vue模板中为img元素添加src情况一致。