如何解决.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.extend函数扩展自己对象的js代码
Dec 09 Javascript
利用javascript判断文件是否存在
Dec 31 Javascript
jquery 显示*天*时*分*秒实现时间计时器
May 07 Javascript
获取中文字符串的实际长度代码
Jun 05 Javascript
c#程序员对TypeScript的认识过程
Jun 19 Javascript
javascript绘制漂亮的心型线效果完整实例
Feb 02 Javascript
KnockoutJS 3.X API 第四章之数据控制流if绑定和ifnot绑定
Oct 10 Javascript
浅谈jQuery绑定事件会叠加的解决方法和心得总结
Oct 26 Javascript
浅析JavaScript中作用域和作用域链
Dec 06 Javascript
用js制作淘宝放大镜效果
Oct 28 Javascript
浅谈vue.js中v-for循环渲染
Jul 26 Javascript
vscode 开发Vue项目的方法步骤
Nov 25 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的webservice的wsdl的XML无法显示问题的解决方法
2014/03/11 PHP
destoon实现调用自增数字从1开始的方法
2014/08/21 PHP
PHP的PDO操作简单示例
2016/03/30 PHP
有趣的JavaScript数组长度问题代码说明
2011/01/20 Javascript
用示例说明filter()与find()的用法以及children()与find()的区别分析
2013/04/26 Javascript
JS小功能(button选择颜色)简单实例
2013/11/29 Javascript
使用FlexiGrid实现Extjs表格效果方法分享
2014/12/16 Javascript
javascript实现瀑布流自适应遇到的问题及解决方案
2015/01/28 Javascript
javascript实现的图片切割多块效果实例
2015/05/07 Javascript
JS实现很实用的对联广告代码(可自适应高度)
2015/09/18 Javascript
浅谈js的ajax的异步和同步请求的问题
2016/10/07 Javascript
微信小程序 五星评分(包括半颗星评分)实例代码
2016/12/14 Javascript
jQuery插件DataTable使用方法详解(.Net平台)
2016/12/22 Javascript
将input框中输入内容显示在相应的div中【三种方法可选】
2017/05/08 Javascript
bootstrap Table插件使用demo
2017/08/07 Javascript
详解适配器在JavaScript中的体现
2018/09/28 Javascript
vue element动态渲染、移除表单并添加验证的实现
2019/01/16 Javascript
ES6 更易于继承的类语法的使用
2019/02/11 Javascript
Javascript柯里化实现原理及作用解析
2020/10/22 Javascript
零基础学Python(一)Python环境安装
2014/08/20 Python
python下paramiko模块实现ssh连接登录Linux服务器
2015/06/03 Python
python基于BeautifulSoup实现抓取网页指定内容的方法
2015/07/09 Python
Python爬豆瓣电影实例
2018/02/23 Python
python实现tail实时查看服务器日志示例
2019/12/24 Python
Pytorch mask_select 函数的用法详解
2020/02/18 Python
jupyter notebook指定启动目录的方法
2021/03/02 Python
HTML5标签嵌套规则详解【必看】
2016/04/26 HTML / CSS
猫途鹰:全球领先的旅游点评社区
2017/04/07 全球购物
施华洛世奇水晶荷兰官方网站:SWAROVSKI荷兰
2017/05/12 全球购物
思想专业自荐信范文
2013/12/25 职场文书
市场营销毕业生自荐信范文
2014/04/01 职场文书
幼儿园老师新年寄语2015
2014/12/08 职场文书
会计人员岗位职责
2015/02/03 职场文书
初中英语教学随笔
2015/08/15 职场文书
2016年质量月活动总结报告
2016/04/05 职场文书
vue3使用vuedraggable实现拖拽功能
2022/04/06 Vue.js