如何解决.vue文件url引用文件的问题


Posted in Javascript onJanuary 18, 2019

解决.vue文件url引用文件的问题

遇到的问题:

  • 在css中引入图片,明明目录结构是对的,还是This dependency was not found
  • dev好好的,build 之后凉凉,图片加载404

添加图片路径配置

webpack 添加 alias

//webpack.base.conf.js
 alias: {
  '@': resolve('src'),
  //加入
  'assets': resolve('src/assets')
 }

路径书写规则

  • template 可使用@~
  • style 只能使用~
  • script 只能使用@
  • 不需要经过打包的static文件写相对路径

根据limit:10000,使用两张图片:

<template>
 <div>
  <div>
   img+src:@
   <img src="@/assets/images/jiaban.jpg" height="200px">
   <img src="@/assets/images/cat.png" alt="">
  </div>
  <div>
   img+src:~
   <img src="~assets/images/jiaban.jpg" height="200px">
   <img src="~assets/images/cat.png" alt="">
  </div>
  <div>
   img+js(attrs):
   <img :src="jiaban" height="200px">
   <img :src="cat" alt="">
   <ul>
    <li>{{jiaban}}</li>
    <li>{{cat}}</li>
   </ul>
  </div>
  <div class="css-bg">
   img+css(background-images):
   <span class="css-bg__1"></span>
   <span class="css-bg__2"></span>
  </div>
  <div>
   static:
    <img src="static/images/jiaban.jpg" height="200px">
   <img src="static/images/cat.png" alt="">
  </div>
 </div>
</template>

<script>
const jiaban = require('@/assets/images/jiaban.jpg');
const cat = require('@/assets/images/cat.png');

export default {
 data(){
  return {
   jiaban,
   cat
  }
 }
}
</script>

<style lang="scss">
.css-bg__1,
.css-bg__2{
 display: inline-block;
}
.css-bg__1{
 height: 200px;
 width: 173px;
 background-image: url(~assets/images/jiaban.jpg);
 background-size: contain;
}
.css-bg__2{
 height: 49px;
 width: 49px;
  background-image: url(~assets/images/cat.png);
 background-size: contain;
}
</style>

开发环境截图:

如何解决.vue文件url引用文件的问题

添加构建路径配置

添加ExtractTextPluginpublicPath配置,这里根据实际情况配:

//build/util.js
 // Extract CSS when that option is specified
 // (which is the case during production build)
 if (options.extract) {
  return ExtractTextPlugin.extract({
  use: loaders,
  fallback: 'vue-style-loader',
  publicPath: '../../', 
  })
 } else {
  return ['vue-style-loader'].concat(loaders)
 }

生产环境截图:

如何解决.vue文件url引用文件的问题

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 学习笔记(七)字符串的连接
Dec 31 Javascript
Fastest way to build an HTML string(拼装html字符串的最快方法)
Aug 20 Javascript
分享一个我自己写的ToolTip提示插件(附源码)
Jan 20 Javascript
JavaScript 函数replace深入了解
Mar 14 Javascript
node.js中的buffer.toString方法使用说明
Dec 14 Javascript
chrome调试javascript详解
Oct 21 Javascript
基于Jquery代码实现支持PC端手机端幻灯片代码
Nov 17 Javascript
微信小程序 页面跳转及数据传递详解
Mar 14 Javascript
vue2.0 better-scroll 实现移动端滑动的示例代码
Jan 25 Javascript
Vue中CSS动画原理的实现
Feb 13 Javascript
微信小程序实现的一键复制功能示例
Apr 24 Javascript
Vue页面手动刷新,实现导航栏激活项还原到初始状态
Aug 06 Javascript
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
Jan 18 #jQuery
vue.js实现的幻灯片功能示例
Jan 18 #Javascript
vue ssr 实现方式(学习笔记)
Jan 18 #Javascript
JS实现的贪吃蛇游戏完整实例
Jan 18 #Javascript
jquery的$().each和$.each的区别
Jan 18 #jQuery
使用form-create动态生成vue自定义组件和嵌套表单组件
Jan 18 #Javascript
jquery层次选择器的介绍
Jan 18 #jQuery
You might like
php的数组与字符串的转换函数整理汇总
2013/07/18 PHP
php采用curl实现伪造IP来源的方法
2014/11/21 PHP
Laravel框架实现的记录SQL日志功能示例
2018/06/19 PHP
PHP+ajax实现上传、删除、修改单张图片及后台处理逻辑操作详解
2020/02/12 PHP
javascript 贪吃蛇实现代码
2008/11/22 Javascript
jQuery学习7 操作JavaScript对象和集合的函数
2010/02/07 Javascript
JS打开图片另存为对话框实现代码
2012/12/26 Javascript
多个jquery.datatable共存,checkbox全选异常的快速解决方法
2013/12/10 Javascript
简单js代码实现selece二级联动(推荐)
2014/02/18 Javascript
window.onload追加函数使用示例
2014/03/03 Javascript
学习JavaScript设计模式之状态模式
2016/01/08 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(二)
2016/02/16 Javascript
基于jQuery实现仿搜狐辩论投票动画代码(附源码下载)
2016/02/18 Javascript
jQuery四种选择器使用及示例
2016/06/05 Javascript
jQuery Easyui学习教程之实现datagrid在没有数据时显示相关提示内容
2016/07/09 Javascript
利用Javascript实现BMI计算器
2016/08/16 Javascript
jQuery 插件封装的方法
2016/11/16 Javascript
扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框
2017/02/21 Javascript
javascript实现延时显示提示框效果
2017/06/01 Javascript
JavaScript模拟文件拖选框样式v1.0的实例
2017/08/04 Javascript
React教程之封装一个Portal可复用组件的方法
2018/01/02 Javascript
vue-cli脚手架config目录下index.js配置文件的方法
2018/03/13 Javascript
vue-cli配置全局sass、less变量的方法
2019/06/06 Javascript
[37:23]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第二局
2016/03/04 DOTA
python脚本实现数据导出excel格式的简单方法(推荐)
2016/12/30 Python
Python如何实现守护进程的方法示例
2017/02/08 Python
python 利用turtle库绘制笑脸和哭脸的例子
2019/11/23 Python
Python通过Tesseract库实现文字识别
2020/03/05 Python
html5声频audio和视频video等新特性详细说明
2012/12/26 HTML / CSS
捐资助学感谢信
2015/01/21 职场文书
单位考核聘任报告
2015/03/02 职场文书
导师工作推荐信
2015/03/27 职场文书
工地食品安全责任书
2015/05/09 职场文书
有关朝花夕拾的读书笔记
2015/06/29 职场文书
一篇文章学会Vue中间件管道
2021/06/20 Vue.js
Spring 使用注解开发
2022/05/20 Java/Android