1. 引图片或者文件报错

• 错误描述
  Module parse failed: Unexpected character '' (1:0) You may need an appropriate loader to handle this file type.

• 错误详情

  
  
  屏幕快照 2018-11-28 下午4.55.05.png
• 错误原因
  webpack将各个模块打包成一个文件，样式中的url路径是相对入口html页面的，而不是相对于原始vue文件所在的路径的，因此导致图片引入失败。

• 解决办法：
  使用 url-loader 进行 webpack 配置

  
  
  image.png
• 为什么使用url-loader

// webpack.config.js
{
  loader: 'url-loader',
  options: {
    limit: 2048
  }
}

url-loader工作机制分两种：

1. 引入文件大小小于limit参数，url-loader将会把文件转为DataURL。
2. 引入文件大小大于limit参数，url-loader会调用file-loader进行处理，参数也会直接传给file-loader，对文件进行拷贝，若不配置，默认拷贝到打包文件同目录下。

url-loader类似于 file-loader，但如果文件小于字节限制，则可以返回DataURL。
(file-loader可以解析项目中的url引入，根据配置，将图片拷贝到相应的路径，修改打包后文件引用路径，使之指向正确的文件。)
url-loader 会将引入的文件进行编码，转换为base64 URI，这样就可以访问引入的文件了。但是如果引入的文件较大，编码会消耗性能。因此 url-loader的工作机制起到了作用。

2. 引 css 文件报错

• 错误描述
  Module not found: Error: Can't resolve 'style-loader' in '/Users

• 错误详情

  
  
  屏幕快照 2018-11-28 下午5.00.34.png

• 解决办法
  npm 安装 style-loader 并进行 webpack 配置

  
  
  image.png

3. 引.eot 文件报错

• 错误描述
  ERROR in ./node_modules/video.js/dist/font/VideoJS.eot 1:1 Module parse failed: Unexpected character ' (1:1)

• 错误详情

  
  
  image.png

• 解决办法
  webpack 配置中添加 eot 字体的设置

  
  
  image.png