我个人喜欢把所有引用文件全部放在打包文件src的同级文件static文件内部,方便整合。

提醒:vue项目中正常情况下图片是由 url-loader 处理,加入了hash值,如果放到static里面webpack打包后只会把资源复制到发布目录而不会把小图片优化为base64。

如果我们使用static目录存放图片会以为打包而产生一系列路径问题

总结来说有以下两种

使用绝对路径

===》 开发环境正常,但是到了生产环境因为就会全部找不到路径。

  • 原因:使用绝对路径打包好依然是绝对路径,但是生产环境没有设置根目录所有无法使用。

  • 解决方法:在服务器上设置SCP,即可使用绝对路径。

<template>
<div>
<h1>HTML直接使用</h1>
<img src="/static/images/b1.jpg" alt="">
<h1>JS使用</h1>
<img :src="imgUrl" alt="">
<h1>css中使用</h1>
<div class="bg"></div>
</div>
</template> <script>
export default {
data () {
return {
imgUrl: '/static/images/b2.jpg'
}
}
}
</script>
<style scoped>
.bg{
width: 750px;
height: 600px;
background:url('/static/images/b3.jpg');
}
</style>

使用相对路径

===》开发环境也正常,但是到了生产环境只有HTML里面的图片资源正常。JS和CSS中都找不到路径

原因:HTML里面的图片路径会经过vue转换路径所有正常显示,js因为没有处理而找不到路径。所以我们直接帮它处理即可

解决方法:

  • HTML中使用相对路径让vue正常打包转换路径;

  • JS中使用直接设置路径为打包后应该显示的路径 ./static/images/b2.jpg 即可正常显示

  • CSS中使用因为打包后代码都是在 css-- * .css文件中,所以我们使用 ../../static/images/b3.jpg。同时还需要修改两个地方的设置

【build/utils.js文件】

if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader',
publicPath: '../../' //新增这一句,作用是设置打包过程中提取CSS的方法
})
} else {
return ['vue-style-loader'].concat(loaders)
}

【config/index.js 文件】

// 找到build
build: {
assetsSubDirectory: 'static',
assetsPublicPath: '/',
}
// 修改为
build: {
assetsSubDirectory: './static',// 子目录---解决css相对路径的问题
assetsPublicPath: './', //资源专用路径---解决JS路径问题
}

【使用演示】

<template>
<div>
<h1>HTML直接使用</h1>
<img src="../../static/images/b1.jpg" alt="">
<h1>JS使用</h1>
<img :src="imgUrl" alt="">
<h1>css中使用</h1>
<div class="bg"></div>
</div>
</template> <script>
export default {
data () {
return {
imgUrl: './static/images/b2.jpg'
}
}
}
</script>
<style scoped>
.bg{
width: 750px;
height: 600px;
background:url('../../static/images/b3.jpg');
}
</style>

以上就是我整理的使用static目录存放图片的解决方案,如果你有其他好的建议可以联系我哦!

vue项目使用static目录存放图片解决方案的更多相关文章

  1. Vue项目部署遇到的问题及解决方案

    写在前面 Vue-Router 有两种模式,默认是 hash 模式,另外一种是 history 模式. hash:也就是地址栏里的 # 符号.比如 http://www.example/#/hello ...

  2. vue项目 webpack打包后,图片路径是绝对路径

    vue项目,使用webpack打包,虽然在全局把路径改成了相对的路径,但是图片引用的路径还是异常的,解决办法如下: 1.config文件夹下index.js中: assetsPublicPath:&q ...

  3. vue项目开发基本目录结构

    § 目录结构 . ├── build/ # Webpack 配置目录 ├── dist/ # build 生成的生产环境下的项目 ├── src/ # 源码目录(开发都在这里进行) │ ├── ass ...

  4. vue项目中,单页图片过多,使用懒加载

    最近做项目,一页图片很多,加载的时候效果很差. 通过学习借鉴其他大神的方法,使用了插件vue-lazyload,使用这个插件,界面更美观了,加载的效果好起来. 安装 npm i vue-lazyloa ...

  5. npm 创建vue项目(指定目录进行创建)

    1.先安装node,js和npm 检验mpm 和node的方式是 npm -v  / node -v 2.安装最新版本 npm install @vue/cli -g 意外安装老版本的是代码  npm ...

  6. 怎样理解 Vue 项目的目录结构?

      Vue 项目的目录结构如下, 我们将会在后面逐个去了解它们的作用: 01. build - 存储项目构建相关的代码, 比如 webpack. 02. config - Vue 的配置目录,包括端口 ...

  7. vue项目搭建及创建、目录结构、项目启动、全局配置

    Vue项目环境搭建 """ node ~~ python:node是用c++编写用来运行js代码的 npm(cnpm) ~~ pip:npm是一个终端应用商城,可以换国内 ...

  8. element-ui和npm、webpack、vue-cli搭建Vue项目

    一.element-ui的简单使用 1.安装 1. npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm i element-ui -S 2. CDN ...

  9. vue-cli搭建vue项目(单页面应用)

    1.全局安装vue-cli 2.创建项目: vue init webpack test test是项目名称,会在当前工作目录下新建一个test文件夹 接下来会手动选择一些配置 除了Setup unit ...

随机推荐

  1. bzoj 2957: 楼房重建【线段树】

    总之就是找前面所有点的斜率都严格小于这个点的这样的点的个数 不管是询问还是修改都非常线段树啊,而且相当眼熟是不是和hotel有点像啊,大概就是区间内记一个len一个max,分别是当前区间答案和区间最大 ...

  2. codevs1297 硬币(背包dp,方案数)

    1297 硬币  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold   题目描述 Description 我们知道即使是同一种面值的硬币,它们的重量也有可能不一样, ...

  3. 洛谷P3698 [CQOI2017]小Q的棋盘

    传送门 考虑一个贪心,先在根节点周围转一圈,然后再往下走最长链肯定是最优的 然后设最长链的长度为$d$,如果$m\leq d$,那么答案为$m+1$ 否则的话还剩下$m-d+1$步,又得保证能走回来, ...

  4. Joseph UVA 1452 Jump

    题目传送门 /* 数学:约瑟夫环问题的变形,首先定义f[i]表示剩下i个人时,最后一个选出的人,有个公式:f[i] = (f[i-1] + m) % i f[1] = 0(编号从0开始),那么类似最后 ...

  5. SPFA+Dinic HDOJ 5294 Tricks Device

    题目传送门 /* 题意:一无向图,问至少要割掉几条边破坏最短路,问最多能割掉几条边还能保持最短路 SPFA+Dinic:SPFA求最短路时,用cnt[i]记录到i最少要几条边,第二个答案是m - cn ...

  6. 题解报告:hdu 2717 Catch That Cow(bfs)

    Problem Description Farmer John has been informed of the location of a fugitive cow and wants to cat ...

  7. ACM_抢糖果

    抢糖果 Time Limit: 2000/1000ms (Java/Others) Problem Description: 今天计实班的生活委员心情大好,在永诚超市狂购了好多好多糖果,好开心~o(∩ ...

  8. LN : leetcode 3 Longest Substring Without Repeating Characters

    lc 3 Longest Substring Without Repeating Characters 3 Longest Substring Without Repeating Characters ...

  9. 计算给定数组 arr 中所有元素的总和的几种方法

    1.forEach遍历: function sum(arr) {     var result = 0;     arr.forEach(function(item,index) {          ...

  10. App保持登录状态的常用方法

    我们在使用App时,一次登录后App如果不主动退出登录或者清除数据,App会在很长一段时间内保持登录状态,或者让用户感觉到登录一次就不用每次都输入用户密码才能进行登录.银行.金融涉及到支付类的App一 ...