Vue打包项目图片等静态资源的处理

　　项目打包，默认是打包在根目录下面的。当然我们可以通过设置，打包到任意子目录中去。但是，当项目中引入资源的，比如：引入图片资源、js资源、或者字体图标之类的。那么可能在这个中间又会踩坑。

1、在vue文件引入图片

　　例如，我们将一张图片放到资源目录 /static/image/lyf.jpg 我们在 vue 文件中用下面的代码来使用这张图片。

<img src="static/image/lyf.jpg" alt="">

注意，最前面不要加 / ，如果是这样操作的话，会变成相对根目录调用图片。如果你的项目要打包到子目录的话，这样做就会出现问题。

2、在 css 文件中，引用图片的处理

　　还是上面那张图片，我们需要在 css 中来引用，如何来写呢？

.love {background-image: url('../static/image/lyf.jpg');
}

　　这里为什么要加上 ../ 呢？

　　如果是最终打包到根目录的话，可以使用 / 这种路径。这个是完全可以理解的。

　　但，如果是打包到子目录，我们必须看下生成的最终路径：

├── index.html
└── static├── css│   └── app.a7a745952a8ca7f8c9413d53b431b8c8.css├── image│   └── lyf.jpg├── img│   └── lyf.9125a01.jpg└── js├── app.39ccc604caeb34166b49.js├── manifest.b1ad113c36e077a9b54d.js└── vendor.0b8d67613e49db91b787.js

　　如上，我们可以看到这个 css 相对 图片 的路径的地址。

　　你要疑问了，这样的相对路径，我们可以使用 ../image/lyf.jpg 来进行调用呀。嗯，看上去可以，但是，如果是这样的话，在开发模式中又会出错了。

　　所以，还是要用 '../static/image/lyf.jpg' 这样的路径方式来调用图片。

Vue打包项目图片等静态资源的处理相关推荐

Vue项目中的静态资源引入
Vue项目中的静态资源引入 assets和static assets 静态资源访问static assets和static assets assets在src文件夹下面,src里面的文件是参与打包的, ...
webpack配置：打包第三方类库、第三方类库抽离、watch自动打包、集中拷贝静态资源...
一.打包第三方类库下面说2种方法: 第一种: 1.引入jQuery,首先安装: npm install --save-dev jquery 2.安装好后,在index.js中引入,用jquery语法 ...
关于SpringBoot项目通过jar包启动之后无法读取项目根路径静态资源
前言:这个是昨天晚上在部署一个项目的时候发现的,在此记录一下关于SpringBoot项目通过jar包启动之后无法读取项目根路径静态资源问题描述在部署了一个项目之后,打开项目页面进行测试,发现有一 ...
Spring-Boot：写出来的网站访问不到静态资源？怎样通过url访问SpringBoot项目中的静态资源？localhost:8989/favicon.ico访问不了工程中的图标资源？
Spring-Boot:Spring-Boot写出来的网站访问不到静态资源?怎样通过url访问SpringBoot项目中的静态资源?localhost:8989/favicon.ico访问不了工程中的 ...
java 不重启部署_一篇文章带你搞定SpringBoot不重启项目实现修改静态资源
一.通过配置文件控制静态资源的热部署在配置文件 application.properties 中添加: #表示从这个默认不触发重启的目录中除去static目录 spring.devtools.res ...
如何在React Native中构建项目并管理静态资源
by Khoa Pham 通过Khoa Pham 如何在React Native中构建项目并管理静态资源 (How to structure your project and manage stati ...
GET http://localhost:18086/css/all.css:浏览器无法访问项目下的静态资源
在做畅购商城项目时,浏览器无法访问项目下的静态资源,报错信息如下图所示.老师只提了一个可能原因:不能用相对路径href="./css/all.css",改为绝对路径href=& ...
vue项目打包之后部署访问静态资源全都404
问题 vue项目npm run build之后打包生成的dist文件夹,部署到服务器上访问静态资源全都404 解决找到项目的vue.config.js文件 module.exports = {// ...
vue项目配置public静态资源路径访问
1.简介一般的vue项目都有一个初始index.html,而其他js.css都是这个html引入的,默认情况下使用绝对路径引入,如/js/app.js 这样就有一个问题,静态资源经常要部署在不同的上 ...

Vue打包项目图片等静态资源的处理

Vue打包项目图片等静态资源的处理相关推荐

最新文章

热门文章