1

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,望各位大神批评指正,祝大家学习愉快!


南乔
15 声望3 粉丝

我爱敲代码,代码给我快乐