vue 直接访问静态图片_如何解决vue打包项目中的图片,静态css,js 不能访问路径问题...

1.在书写代码的时候按照相对路径引入；

但是webpack+vue-cli 默认打包的css,js 等资源的路径是绝对的；

实际写的代码

export default {

}

.logo {

width: 200px;

height: 200px;

background: url(../assets/images/logo.png) center center;

}

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