vue项目使用static目录存放图片解决方案

 

我我的喜欢把全部引用文件所有放在打包文件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目录存放图片的解决方案，若是你有其余好的建议能够联系我哦！