1.在书写代码的时候按照相对路径引入;
- 但是webpack+vue-cli 默认打包的css,js 等资源的路径是绝对的;
实际写的代码
<template>
<div>
<div class="logo"></div>
<img src="../assets/images/logo.png" alt="">
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
.logo {
width: 200px;
height: 200px;
background: url(../assets/images/logo.png) center center;
}
</style>
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,望各位大神批评指正,祝大家学习愉快!
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。