摘要：
就个人而言，我更喜欢将所有引用的文件放在与src文件相同级别的静态文件中，以便于集成。提醒：在vue项目中，图像通常由添加了哈希值的url加载器处理。如果webpack以静态方式打包，它只会将资源复制到发布目录，不会将小图像优化到base64。如果我们使用静态目录存储图像，打包时会出现一系列路径问题。总之，有两种类型的绝对路径==“开发环境是正常的，但当我们到达生产环境时，我们无法找到所有路径。
我个人喜欢把所有引用文件全部放在打包文件src的同级文件static文件内部，方便整合。
提醒：vue项目中正常情况下图片是由
url-loader处理，加入了hash值，如果放到static里面webpack打包后只会把资源复制到发布目录而不会把小图片优化为base64。
如果我们使用static目录存放图片会以为打包而产生一系列路径问题
总结来说有以下两种
使用绝对路径
===》 开发环境正常，但是到了生产环境因为就会全部找不到路径。
原因：使用绝对路径打包好依然是绝对路径，但是生产环境没有设置根目录所有无法使用。
解决方法：在服务器上设置SCP，即可使用绝对路径。
<template> <div> <h1>HTML直接使用</h1> <img src="/static/images/b1.jpg" alt=""> <h1>JS使用</h1> <img :src="imgUrl" alt=""> <h1>css中使用</h1> <div class="bg"></div> </div> </template> <script> export default { data () { return { imgUrl: '/static/images/b2.jpg' } } } </script> <style scoped> .bg{ width: 750px; height: 600px; background:url('/static/images/b3.jpg'); } </style>
使用相对路径
===》开发环境也正常，但是到了生产环境只有HTML里面的图片资源正常。JS和CSS中都找不到路径
原因：HTML里面的图片路径会经过vue转换路径所有正常显示，js因为没有处理而找不到路径。所以我们直接帮它处理即可
解决方法：
HTML中使用相对路径让vue正常打包转换路径；
JS中使用直接设置路径为打包后应该显示的路径
./static/images/b2.jpg即可正常显示CSS中使用因为打包后代码都是在 css-- * .css文件中，所以我们使用
../../static/images/b3.jpg。同时还需要修改两个地方的设置
【build/utils.js文件】
if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader', publicPath: '../../' //新增这一句,作用是设置打包过程中提取CSS的方法 }) } else { return ['vue-style-loader'].concat(loaders) }
【config/index.js 文件】
// 找到build build: { assetsSubDirectory: 'static', assetsPublicPath: '/', } // 修改为 build: { assetsSubDirectory: './static',// 子目录---解决css相对路径的问题 assetsPublicPath: './', //资源专用路径---解决JS路径问题 }
【使用演示】
<template> <div> <h1>HTML直接使用</h1> <img src="../../static/images/b1.jpg" alt=""> <h1>JS使用</h1> <img :src="imgUrl" alt=""> <h1>css中使用</h1> <div class="bg"></div> </div> </template> <script> export default { data () { return { imgUrl: './static/images/b2.jpg' } } } </script> <style scoped> .bg{ width: 750px; height: 600px; background:url('../../static/images/b3.jpg'); } </style>
以上就是我整理的使用static目录存放图片的解决方案，如果你有其他好的建议可以联系我哦！