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目录存放图片的解决方案，如果你有其他好的建议可以联系我哦！

巴特西

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

使用绝对路径

使用相对路径

最新文章

热门文章