VUE中处理资源路径

最新推荐文章于 2025-03-20 15:44:55 发布

原创最新推荐文章于 2025-03-20 15:44:55 发布 · 1.9k 阅读

3 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

17 篇文章

订阅专栏

在 Vue 应用中，处理资源路径分为相对路径、绝对路径以及使用 `public` 文件夹的情况。相对路径的资源会被 webpack 处理，而公共文件夹中的资源则不受处理，适合存放静态资产。使用 `public` 文件夹可以避免特定场景下的文件处理问题，例如需要固定文件名或大量动态引用。配置 `publicPath` 和在 HTML 中设置链接前缀是解决部署在非根目录时静态资源路径问题的关键。

处理资源路径

相对路径：当你在 JavaScript、CSS 或 *.vue 文件中使用相对路径 (必须以 . 开头) 引用一个静态资源时，该资源将被webpack处理。
```
<img alt="Vue logo" src="./assets/logo.png">
```

绝对路径:如果 URL 是一个绝对路径，它会去当前服务器的静态路径(public)下去找，public文件webpack不会做任何处理，用来放静态资源
在这里插入图片描述

<img alt="Vue logo" src="/assets/logo.png"> //相当于localhost:8080/assets/logo.png ，去public中找assets文件
<img alt="Vue logo" src="http://image.xx.com/logo.png">

如果 URL 以 ~ 开头会作为一个模块请求被解析从node_modules中引用资源。
```
<img src="~some-npm-package/foo.png">
```
如果 URL 以 @ 开头会作为一个模块请求被解析。Vue CLI 默认会设置一个指向 src 的别名 @ 。
```
import Hello from '@/components/Hello.vue'
```

何时使用 public 文件夹

通过 webpack 的处理并获得如下好处：

脚本和样式表会被压缩且打包在一起，从而避免额外的网络请求。
文件丢失会直接在编译时报错，而不是到了用户端才产生 404 错误。
最终生成的文件名包含了内容哈希，因此你不必担心浏览器会缓存它们的老版本

如下情况考虑使用public文件夹：

你需要在构建输出中指定一个固定的文件名字。
你有上千个图片，需要动态引用它们的路径。
有些库可能和 webpack 不兼容，除了将其用一个独立的

使用public文件夹的静态路径问题

步骤：
（1）如果你的应用没有部署在域名的根部，那么你需要为你的 URL 配置 publicPath 前缀

	// vue.config.js
	module.exports = {
	 publicPath: process.env.NODE_ENV === 'production'
	  ? '/cart/'     //在生产环境默认在根路径中加上cart作为静态文件的根路径 localhost:8080/cart/assets/logo.png
	 : '/c'        //在开发环境时静态文件的默认根路径
	}

(2）在 public/index.html 等通过 html-webpack-plugin 用作模板的 HTML 文件中，你需要通过<%= BASE_URL %> 设置链接前缀：

```
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> //  localhost:8080/c/assets/favicon.ico
```

（3）在模板中使用，先向组件传入BASE_URL：

	data () {
		 return {
		  publicPath: process.env.BASE_URL
		}
	}

界面引入

	 <img :src="`${publicPath}assets/logo.png`">  //localhost:8080/c/assets/logo.png