脚本宝典收集整理的这篇文章主要介绍了如何解决vue打包项目中的图片,静态css,js 不能访问路径问题，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

1.在书写代码的时候按照相对路径引入；

1. 但是webpack+vue-cli 默认打包的css,js 等资源的路径是绝对的；

实际写的代码

<template>
  <div>
    <div class="logo"></div>
    <img src="../assets/images/logo.png" alt="">
  </div>
</template>

<script>
export default {
  
}
</script>
<style scoped>
  .logo {
    width: 200px;
    height: 200px;
    background: url(../assets/images/logo.png) center center;
  }
</style>

3.webpack 打包编译后的路径是这样的；打包编译之后的路径是绝对路径；当部署到带有文件夹的项目中就会报错，因为把配置的static 文件当成了根路径；
解决办法： 引入相对路径；
打开build/webpack.prod.conf.js

output: {
    path: config.build.assetsRoot,
    filename: utils.assetsPath('js/[name].[chunkhash].js'),
    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js'),
    publicPath: './'
  },

4.执行打包命令，发现解决了css,js img图片的路径问题，但是没有解决背景图片的路径问题，下面我们解决背景图片的问题
修改build/utils.js

if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        publicPath: '../../'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }

再次执行打包命令，发现完美解决问题；
职场小白south Joe，望各位大神批评指正，祝大家学习愉快！

脚本宝典总结

以上是脚本宝典为你收集整理的如何解决vue打包项目中的图片,静态css,js 不能访问路径问题全部内容，希望文章能够帮你解决如何解决vue打包项目中的图片,静态css,js 不能访问路径问题所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。