Vue-cli构建项目, 组件中js代码引入图片路径问题
2017-07-04 10:25
1021 查看
问题描述
.vue的组件分成三个部分,
template结构部分,
script路径代码,
style页面样式
首先, 我们可以在template可以正确引入, 无论是dev, 还是build都没有问题, 在style中引入背景图的话, 我们在上一篇文章中已经解决.
这次我们发现如果需要在js代码中控制图片路径的显示, 使用
:src的话, 直接写是错误的, 并不能打包, 在
dev和
build都是错误的, 都不能正确读取.
这就是我们的问题:
在组件的js中, 如果存在路径, 不能被争取读取
解决方法
理解在webpack中一切皆模块的思想: 将所有的图片按照模块进行处理
即新建一个文件, 然后使用
import引入所有的图片, 使用即可.
具体代码如下:
// src/config/images.js import head01 from '../img/1.jpg' import head02 from '../img/2.jpg' import background from '../img/background.jpg' export default { head01: head01, head02: head02, background: background }
// src/components/TimeBox.vue <script> import img from '../config/images.js' export default { name: 'TimeBox', data () { return { imgUrl: img.head01 } } } </script>
解决思路
修改配置
开始时, 入坑了, 总是以为要像scss那样, 需要修改配置项才行.最后肯定是不行的, 没有找到这样的配置项, 也暴露出我在webpack上太菜, 连最基本的都还没有搞清楚
绝对路径
采用绝对路径后, 在dev的时候, 的确把问题解决了,
但是需要在把图片放到static目录下面, 其实也是一种方法.
但是不知道为什么, 打包之后, 依旧不能成功读取.这就让人很绝望了, 因为打包之后不再是相对路径, 我们需要一个相对路径才行
引入模块
这也是webpack的精髓吧, 一切皆模块只是现在还没有能好好理解模块化的思想, 也没有把模块化的概念掌握.
相关文章推荐
- Vue-cli 构建项目 的`.vue`组件中, scss中添加背景图路径问题
- Vue-cli项目中,引入css、js或者引入组件,检查后未发现错误,npm红叉报错原因
- vue-cli项目打包后图片路径问题
- vue-cli项目中单文件组件引入bootstrap.js异常的解决方案
- vue-cli项目引用外部js代码
- SpringMVC WEB项目 jsp引入的js,css,gif等类型文件找不到路径问题
- vue-cli webpack模板项目搭建以及打包时路径问题的解答
- Vue.js 项目build后路径问题
- vue.js vue组件中style样式中的css引入背景图路径不对,解决方案
- webpack打包vue项目后,一些文件图片路径找不到的问题解决办法
- SpringMVC WEB项目 jsp引入的js,css文件找不到路径问题()
- Vue.js:使用vue-cli快速构建项目
- Vue-cli项目中引入外部/第三方css/js/less文件具体步骤
- 用vue构建项目笔记2(引入自定义头部组件)
- 如何在vue-cli+webpack构建的项目引入jquery和bootstrap
- vue-cli快速构建项目>>>>及引入jquery、jquery插件、this的指向 mounted钩子函数应用
- 详解vue-cli快速构建项目以及引入bootstrap、jq
- vue2.0 使用vue-cli搭建的项目如何在index.html里引入静态css和js
- MVC发布后项目存在于根目录中的子目录中时的css与js、图片路径问题