vue学习笔记9——图片路径问题

vue学习笔记9——图片路径问题

当npm run build的时候生成dist文件夹后

会有css中的background-img显示不出来或是js中或<script>中的url或是其他的引入，导致图片无法显示的问题

一般，开始的时候，我们习惯在assets里面存在img文件，（至少我是这么做的）

当时的static文件夹里为空，

当npm run build的时候会自动生成static文件夹，并在里面生成对应的js，css，img3个文件夹，存放静态文件

npm run build完成后要在dist文件夹中的index能打开有显示时，可能有下列问题：

可能存在 js没有加载出来，导致页面没有任何的显示

可能存在图片，没有加载出来，不管是css中还是js中或是<script>中的

解决：

在webpackbase中，目前版本的vue-cli脚手架搭建出来的是这个样子的

一个三目，判断是build还是dev，所以去config文件夹中的index.js文件中查看

在build模块中

    assetsPublicPath: './',  //默认是 '/'  ，我改成的'./'

让其指向根目录dist

js中的用require 方法，使图片可正常的显示：

<script>
export default{
 data () {
return {
 hot_sells: [
 {url: '/static/img/shuncai/Avalokitesvara/Avalokitesvara1.jpeg'},
// {url: './assets/img/shuncai/Buddha/Buddha2.jpeg'},
 {url: require('../../../../assets/img/shuncai/jade/jade3.jpeg')}, // 将js中所有的url，都使用require+相对路径的方法来引入图片。
 {url: '../../../../assets/img/shuncai/jade/jade3.jpeg'},
 {url: '../../../assets/img/shuncai/leaf/leaf1.jpeg'}
 ]
 }
 }
}
</script>

css中的图片和template中的图片用相对路径指向assets/img（存放图片的文件夹）

再次npm run build 完成后，再到dist中的index.html文件可以通过编辑器自带的服务器打开，就不会出现js和图片的加载丢失的问题了

我会在

vue学习笔记10

的时候

写我的这个简单的demo的github地址

vue学习笔记，是根据网上的一些帖子，自己在学习过程中实际情况，总结而来。每个人在学习过程中和实际操作中是有明显的个体差异的。本文仅作参考使用。