如何解决.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_05_原型继承原理
Oct 13 Javascript
Jquery 的outerHeight方法使用介绍
Sep 11 Javascript
Javascript实现的常用算法(如冒泡、快速、鸽巢、奇偶等)
Apr 29 Javascript
javascript中的正则表达式使用指南
Mar 01 Javascript
jQuery支持添加事件的日历特效代码分享(3种样式)
Aug 24 Javascript
jQuery控制DIV层实现由大到小,由远及近动画变化效果
Oct 09 Javascript
JS iFrame加载慢怎么解决
May 13 Javascript
js两种拼接字符串的简单方法(必看)
Sep 02 Javascript
JavaScript中三种常见的排序方法
Feb 24 Javascript
vue-ajax小封装实例
Sep 18 Javascript
vue中eventbus被多次触发以及踩过的坑
Dec 02 Javascript
jQuery实现的卷帘门滑入滑出效果【案例】
Feb 18 jQuery
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中如何判断一个网页请求是ajax请求还是普通请求
2013/08/10 PHP
XAMPP安装与使用方法详细解析
2013/11/27 PHP
php中FTP函数ftp_connect、ftp_login与ftp_chmod用法
2014/11/18 PHP
php+jQuery.uploadify实现文件上传教程
2014/12/26 PHP
laravel容器延迟加载以及auth扩展详解
2015/03/02 PHP
WordPress中编写自定义存储字段的相关PHP函数解析
2015/12/25 PHP
关于Javascript 的 prototype问题。
2007/01/03 Javascript
基础的prototype.js常用函数及其用法
2007/03/10 Javascript
js+html5实现可在手机上玩的拼图游戏
2015/07/17 Javascript
jQuery实现动画效果circle实例
2015/08/06 Javascript
轻松学习Javascript闭包函数
2015/12/15 Javascript
详解Angualr 组件间通信
2017/01/21 Javascript
JavaScript基础教程之如何实现一个简单的promise
2018/09/11 Javascript
VUE.js实现动态设置输入框disabled属性
2019/10/28 Javascript
Vuex中的Mutations的具体使用方法
2020/06/01 Javascript
vue基础知识--axios合并请求和slot
2020/06/04 Javascript
[15:56]Heroes18_暗影萨满(完美)
2014/10/31 DOTA
python登录QQ邮箱发信的实现代码
2013/02/10 Python
python 中if else 语句的作用及示例代码
2018/03/05 Python
详谈python在windows中的文件路径问题
2018/04/28 Python
python实现从本地摄像头和网络摄像头截取图片功能
2019/07/11 Python
Python通过socketserver处理多个链接
2020/03/18 Python
Python导入模块包原理及相关注意事项
2020/03/25 Python
python自动脚本的pyautogui入门学习
2020/04/01 Python
浅谈opencv自动光学检测、目标分割和检测(连通区域和findContours)
2020/06/04 Python
用Python自动清理系统垃圾的实现
2021/01/18 Python
通用C#笔试题附答案
2016/11/26 面试题
英语教学随笔感言
2014/02/20 职场文书
2014年两会学习心得范例
2014/03/17 职场文书
弘扬雷锋精神演讲稿
2014/05/10 职场文书
党的群众路线对照检查材料(个人)
2014/09/24 职场文书
2014年行政后勤工作总结
2014/12/06 职场文书
教导主任个人总结
2015/03/03 职场文书
培训后的感想
2015/08/07 职场文书
2019员工保密协议书(3篇)
2019/09/23 职场文书
JavaScript实现显示和隐藏图片
2021/04/29 Javascript