内容简介:vue项目,build之后会对图片进行处理,具体处理的方式是在文件webpack.base.conf.js中,有如下代码:以上代码中,使用url-loader对图片的大小进行限制,在limit之内,webpack会将图片转化为base64,超出limit限制,交给file-loader处理。如果在limit范围之内,不会出现图片加载不出来的情况;
vue项目,build之后会对图片进行处理,具体处理的方式是在文件webpack.base.conf.js中,有如下代码:
module: { rules: [ { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, // 1k-----限制文件的大小 name: utils.assetsPath('img/[name].[hash:7].[ext]') } } ] }
以上代码中,使用url-loader对图片的大小进行限制,在limit之内,webpack会将图片转化为base64,超出limit限制,交给file-loader处理。
如果在limit范围之内,不会出现图片加载不出来的情况;
超出limit,webpack会将处理后的图片放在dist/static/img/中,此时加载图片将会显示不出来。具体做法如下:
1、在config/index.js文件内,修改代码: (列出index.js的部分代码)
build: { // Template for index.html index: path.resolve(__dirname, '../dist/index.html'), // Paths assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', assetsPublicPath: './', }
assetsPublicPath字段值由之前的'/'改为'./';
2、在webpack.prod.conf.js文件内,output字段,添加代码(publicPath: './'):
output: { publicPath: './', // 添加的代码 path: config.build.assetsRoot, filename: utils.assetsPath('js/[name].[chunkhash].js'), chunkFilename: utils.assetsPath('js/[id].[chunkhash].js') },
3、在utils.js文件里添加 publicPath:'../../',代码如下:
// (which is the case during production build) if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader', publicPath: '../../' // 添加的代码 }) } else { return ['vue-style-loader'].concat(loaders) }
以上步骤操作完后,执行命令:npm run build
在build后,dist中的index.html页面的link、script标签的引入路径变为相对路径;同时,相关的图片路径,也变变为相对路径,此时部署项目,不再出现图片路径404。
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- cocosdx接bugly,上传符号表,有一部分内容解析出来了, 另一部分没有解析出来
- 培训班出来的怎么了?
- SamSam作者又出来浪了
- 明明存在,怎么搜索不出来呢?
- MyBatis 的插件对象如何创建出来的
- 培训出来的程序员容易被代替吗?
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。