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 ;