使用 vue init webpack 或 vue init webpack-simple 创建vue工程后，使用ivew报错

使用 vue init webpack 或 vue init webpack-simple 创建vue工程后，使用ivew报错

微信公众号：前端程序猿之路
关注可了解更多的前端知识，反馈问题或建议，请公众号留言。
如果你觉得公众号内容对你有帮助，欢迎关注并转载

安装iview

npm install view-design --save

引入 ViewUI
一般在 webpack 入口页面 main.js 中如下配置：

import Vue from 'vue';
import VueRouter from 'vue-router';
import App from 'components/app.vue';
import Routers from './router.js';
import ViewUI from 'view-design';
import 'view-design/dist/styles/iview.css';

Vue.use(VueRouter);
Vue.use(ViewUI);

// The routing configurationconst RouterConfig = {
routes: Routers
};
const router = new VueRouter(RouterConfig);

new Vue({
el: '#app',
router: router,
render: h => h(App)
});

报错如下：
webpack可以处理不同类型的模块。除js外，还能处理less，css，jade，coffeeScript等。原理是通过Loader来适配各种非js资源，将它们（除图片资源外）全都转换成js模块。
为了解决上面的错误，我们应该在webpack.config.js中module>rules中加上下面的配置规则:并安装file-loader

 {
        test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
        loader: 'file-loader'
      }

1、file-loader可以用来帮助webpack打包处理一系列的图片文件；比如：.png 、 .jpg 、.jepg等格式的图片；
2、file-loader打包图片的结果：使用file-loader打包的图片会给每张图片都生成一个随机的hash值作为图片的名字；
安装file-loader

npm install --save-dev file-loader

用法默认情况下，生成的文件的文件名就是文件内容的 MD5 哈希值并会保留所引用资源的原始扩展名。

import img from './file.png'

安装完成后 package.json中就有了file-loader这个node_modules
webpack.config.js

module.exports = {
module: {
rules: [
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {}
}
]
}
]
}}

生成文件 file.png，输出到输出目录并返回 public URL。
“/public/path/0dcbbaa7013869e351f.png”
修改完成后项目就不会再报错了

参考链接：
https://www.jianshu.com/p/d18980a6d779
https://blog.csdn.net/qq1377399077/article/details/87694167
file-loader中文文档：
http://doc.codingdict.com/webpack-cn-doc/loaders/file-loader/Webpack打包工具：
https://www.jianshu.com/p/e57e694643d1使用vue组件搭建网页并打包发布： https://blog.csdn.net/weixin_44423832/article/details/88735421
iview官网：
https://www.iviewui.com/docs/guide/start