在使用vue开发项目的时候,经常会遇到的一个问题就是:图片加载不出来。下面是我总结的几种图片加载不出来的情况及解决办法。
一、项目打包完成后,打开整体空白
1、路径问题
原因
在vue+webpack的项目中,项目打包之后的css和js的引用路径是绝对路径,项目部署之后会将静态当成根目录,就造成了文件引用路径的错误。
解决办法
通过修改配置文件,将绝对路径改为相对路径。
具体操作如下:
1.vue-cli 3.0版本之前
配置config下面的index.js中bulid模块导出的路径。因为index.html里边的内容都是通过script标签引入的,而你的路径不对,打开肯定是空白的。先看一下默认的路径。
module.exports = {
build: {
env: require('./prod.env'),
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
productionSourceMap: true,
assetsPublicPath默认的是 ‘/' 也就是根目录。而我们的index.html和static在同一级目录下面。 所以要改为 ‘./ '
2.vue-cli 3.0版本之后
配