webpack搭建vue 项目的步骤(3)

日期：2020-05-11 栏目：程序人生浏览：次

在访问网站时如果图片较多，会发很多http请求，会降低页面性能。这个问题可以通过url-loader解决。url-loader会将引入的图片编码，生成dataURl。相当于把图片数据翻译成一串字符,再把这串字符打包到文件中，最终只需要引入这个文件就能访问图片了。

当然，如果图片较大，编码会消耗性能。因此url-loader提供了一个limit参数，小于limit字节的文件会被转为DataURl，大于limit的还会使用file-loader进行copy。

此处我们使用url-loader,由于它是基于file-loader的封装，所以也需要引入file-loader。

npm install --save-dev file-loader url-loader

webpack.config.js 的rules 中增加如下配置

{
 test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
 loader: 'url-loader',
 options: {
  limit: 10000
 }
}

接下来就是将图片引入到代码中，需要在main.js和index.html 分别作如下修改:

main.js

import Vue from 'vue'
import './styles/main.css'
import logo from'./images/logo.png'

var vm = new Vue({
 el:'#app',
 data:{
  logo:logo,
  msg:'hello vue'
 }
})

index.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>vue demo</title>
</head>
<body>
 <div id="app">
  <img :src="logo" alt="logo" class="logo">
  {{msg}}
 </div>
 <script src="./dist/demo.js"></script>
</body>
</html>

最后运行webpack 命令并访问 index.html ，结果如下

在测试中发现当图片大于10KB的时候发现加载图片失败，找不到图片，但此时在dist目录下面是能看到已经通过加载器加载成功了的图片，再通过浏览器的开发者工具对图片的引用路径进行检查时，可以发现页面中img的路径不对，路径中只有文件名缺失了前面的dist目录,所以此时我们需要将main.js中的代码进行如下修改

logo:"./dist/"+logo,

重新编译后图片就显示出来了。但是现在新的问题又出来了，由于我们在配置文件中配置了小于10kb的代码将以 base64的形式内联在代码中。所以此时是不需要 "./dist" 这个前缀的。解决此问题有两种办法：

不使用base64的形式将图片内嵌到代码中
将html文件放到dist目录中既然用了url-loader加载器则不推荐使用第一种。所以我们使用第二种方式。

将html文件放到dist目录中最简单的办法就是把index.html文件复制到dist目录中，然后将引入就是的代码改为：

转载注明出处：http://www.heiqu.com/468.html

webpack搭建vue 项目的步骤(3)

相关推荐