- 引图片或者文件报错
- 错误描述
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工作机制分两种：
- 引入文件大小小于limit参数，url-loader将会把文件转为DataURL。
- 引入文件大小大于limit参数，url-loader会调用file-loader进行处理，参数也会直接传给file-loader，对文件进行拷贝，若不配置，默认拷贝到打包文件同目录下。
url-loader类似于 file-loader，但如果文件小于字节限制，则可以返回DataURL。
(file-loader可以解析项目中的url引入，根据配置，将图片拷贝到相应的路径，修改打包后文件引用路径，使之指向正确的文件。)
url-loader 会将引入的文件进行编码，转换为base64 URI，这样就可以访问引入的文件了。但是如果引入的文件较大，编码会消耗性能。因此 url-loader的工作机制起到了作用。
- 引 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
- 引.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
