Vue项目打包后背景图片路径错误

Posted 2020-10-24 maqingyuan

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 ;