Vue項目打包後背景圖片路徑錯誤
vue項目打包之後背景圖片出錯的解決方案如下：
1，找到 config->index.js裏面，如下修改
默認配置：
env: require(‘./prod.env‘),
index: path.resolve(__dirname, ‘../dist/index.html‘),
assetsRoot: path.resolve(__dirname, ‘../dist‘),
assetsSubDirectory: ‘static‘,
assetsPublicPath: ‘/‘,
修改為：
env: require(‘./prod.env‘),
index: path.resolve(__dirname, ‘../hgpc/index.html‘),
assetsRoot: path.resolve(__dirname, ‘../hgpc‘),
assetsSubDirectory: ‘./static
assetsPublicPath: ‘./‘,
2，找到 build->utils.js,在裏面加入一句publicPath:‘../../‘,
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
publicPath:‘../../‘,
fallback: ‘vue-style-loader‘
})
} else {
return [‘vue-style-loader‘].concat(loaders)
}
}
3，配置修改完成，接下來，使用有兩種方式，這裏一般和文件結構有關，下面是我的文件結構下的使用
註意事項（分兩種情況）：
第一種：圖片資源放在 assets->img文件夾下面
1，img標簽引入圖片
<img src="../assets/img/loginback.png" class="test-img" />
2，css使用圖片
background: url(‘../assets/img/loginback.png‘) no-repeat top left ;
第二種：圖片資源放在static->img文件夾下面
1，img標簽引入圖片
<img src="../../static/img/loginback.png" class="test-img" /><br><img src="static/img/loginback.png" class="test-img" />
2，css使用圖片
background: url(‘../../static/img/loginback.png‘) no-repeat top left ;
Vue項目打包後背景圖片路徑錯誤