如何解决.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 相关文章推荐
jquery ajax执行后台方法
Mar 18 Javascript
js判断浏览器类型的方法
Aug 07 Javascript
jquery实现div阴影效果示例代码
Sep 16 Javascript
探寻Javascript执行效率问题
Nov 12 Javascript
jquery仿百度经验滑动切换浏览效果
Apr 14 Javascript
js右下角弹出提示框示例代码
Jan 12 Javascript
原生js实现class的添加和删除简单代码
Jul 12 Javascript
artDialog+plupload实现多文件上传
Jul 19 Javascript
JS实现根据用户输入分钟进行倒计时功能
Nov 14 Javascript
IE11下使用canvas.toDataURL报SecurityError错误的解决方法
Nov 19 Javascript
Electron-vue脚手架改造vue项目的方法
Oct 22 Javascript
浅谈JavaScript窗体Window.ShowModalDialog使用
Jul 22 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 session和cookie使用说明
2010/04/07 PHP
php ftp文件上传函数(基础版)
2010/06/03 PHP
PHP开发框架laravel安装与配置教程
2015/03/13 PHP
php随机获取金山词霸每日一句的方法
2015/07/09 PHP
php生成图片验证码的实例讲解
2015/08/03 PHP
PHP多个图片压缩成ZIP的方法
2020/08/18 PHP
PHP使用pdo实现事务处理操作示例
2018/09/05 PHP
Javascript 静态页面实现随机显示广告的办法
2010/11/17 Javascript
通过正则表达式实现表单验证是否为中文
2014/02/18 Javascript
jQuery圆形统计图开发实例
2015/01/04 Javascript
seajs模块之间依赖的加载以及模块的执行
2016/10/21 Javascript
[原创]JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】
2016/11/01 Javascript
js使用Replace结合正则替换重复出现的字符串功能示例
2016/12/27 Javascript
JavaScript获取键盘按键的键码(参照表)
2017/01/10 Javascript
用jquery的attr方法实现图片切换效果
2017/02/05 Javascript
JavaScript对象引用与赋值实例详解
2017/03/15 Javascript
js编写选项卡效果
2017/05/23 Javascript
详解Angular 中 ngOnInit 和 constructor 使用场景
2017/06/22 Javascript
深入理解vue $refs的基本用法
2017/07/13 Javascript
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
2017/12/19 Javascript
vue src动态加载请求获取图片的方法
2018/10/17 Javascript
微信小程序swiper组件实现抖音翻页切换视频功能的实例代码
2020/06/24 Javascript
vue路由的配置和页面切换详解
2020/09/09 Javascript
pycharm修改界面主题颜色的方法
2019/01/17 Python
Python3标准库glob文件名模式匹配的问题
2020/03/13 Python
Anconda环境下Vscode安装Python的方法详解
2020/03/29 Python
python爬虫学习笔记之Beautifulsoup模块用法详解
2020/04/09 Python
解决python和pycharm安装gmpy2 出现ERROR的问题
2020/08/28 Python
大学生涯自我鉴定
2014/01/16 职场文书
查摆问题自我剖析材料
2014/08/18 职场文书
学生意外伤害赔偿协议书
2014/09/17 职场文书
商业用房租赁协议书
2014/10/13 职场文书
2014年镇党建工作汇报材料
2014/11/02 职场文书
2015年民兵整组工作总结
2015/07/24 职场文书
2016年三严三实党课学习心得体会
2016/01/06 职场文书
动态规划之使用备忘录来改进Javascript函数
2022/04/07 Javascript