本文是在该项目中踩坑得出的结论:
一、 关于"You may need an appropriate loader to handle this file type."
ERROR in ./src/app.vue 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
> <template>
| <div>
| <router-view></router-view>
@ ./src/index.js 1:0-28 16:19-22
@ multi (webpack)-dev-server/client?http://0.0.0.0:8080 ./src/index.js
Child html-webpack-plugin for "index.html":
上面的错误翻译过来即为没有一个合适的loader来处理这个文件类型，下面显示的是.vue的文件，那么我检查了一下我的webpack配置和package.json都有了vue-loader，但是还是会报错，只能说明这个新版本v15有问题，后来翻来翻去注意到了#321和#311，我没有采用低版本的方式而是选择了添加一个plugin到webpack的配置文件
const VueLoaderPlugin = require('vue-loader/lib/plugin');
然后在下面plugins数组中实例出来new VueLoaderPlugin()
二、 webpack loader引起的问题
我的代码：
rules: [{
test: '/\.vue$/',
loader: 'vue-loader'
}, {
test: '\.css$/',
use: ['css-loader', 'vue-style-loader', 'style-loader']
}
]
以上代码经大量查找资料得出结论，这里有两个错误：
错误1：Error: [VueLoaderPlugin Error] No matching rule for .vue files found.
由于我用的是webpack 4.x loader的规则已经改变了写法，错误1解决办法：所有文件处理采用test处理规则的时候，应该写成test: /\.vue$/；
错误2解决方式：先看一下原因：
《深入浅出Webpack》中有提到，Rules是通过固定的方式来处理文件的，其中有一种叫做重置顺序的方式，就是说一组Loader的执行顺序，默认是从右到左执行的
再回到我的代码中可以看到，配置.css文件的时候，use了三个loader，先执行的style-loader肯定是无法识别我写入vue的css样式表，所以会报错误2，解决方式很简单，就是 把css-loader放在最后使其先执行，将css代码编译过后再交给style-loader加载到网页中
三、 vue配置路由的问题
在实例Vue的地方，引入路由要引入我们自己定义的路由，而不是npm安装的路由，即：
import Vue from 'vue';
import VueRouter from 'vue-router';
import router from './router/router.js';
import App from './App.vue';
Vue.use(VueRouter);
var vm = new Vue({
el: '#app',
router, // 我的key是不能改变的 value可以是别的名字
render: h => h(App)
});
而且引入的自己写的文件的路由要给router变量，这个变量是不可改变的，因为官方源代码实例路由就是用的router这个名字，所以在实例router的时候，写的路由命名(key)必须是router，值可以是别的名字，但是要和你在router导出的名字一致，如果定义路由的时候用的是route，那么实例化就写为router: route，当然定义的路由名默认为router，像这样：
import Vue from 'vue';
import VueRouter from 'vue-router';
import Index from '../components/index/Index.vue';
Vue.use(VueRouter);
export default new VueRouter({ // 此时导出的是默认的router
routes: [{
path: '/',
name: 'Index',
component: Index
}]
});
遵守以上规则，可以避免以下错误：
TypeError: Cannot read property 'matched' of undefined
TypeError: this._router.init is not a function
四、 component组件配置的问题
根据vue脚手架的规范，App.vue已经常被用来当做组件入口，即为一切切换组件都在这里进行，所以只需要在Vue实例绑定id，写入<router-view>：
<div id="app">
<router-view></router-view>
</div>
定义路由的时候，组件一定是一个组件一个组件引入的，所以key一定是component而不是components，否则就会报下面的错误：
TypeError: Cannot read property '$createElement' of undefined
components既然多了个s，意味着是复数形式，即为多个组件同时引入的时候，这种情况会用在实例化组件或注册组件的时候
五、 组件加载的建议
这个地方算是个建议，现在一般的项目无论大小都存在加载页面渲染页面慢的问题，尤其是含有一些视频和高清图片的项目，更是头疼，因为是同步加载，所以才会慢，如果变成异步加载或是按需加载，不就快了么，除了官方提供的路由懒加载，在webpack模块的加持下，有个require动态引入映入眼帘，还可以通过ensure方法完成按需加载：
const Index = r => require.ensure([], () => r(require('../components/index/Index.vue')), 'Index');
export default new VueRouter({
routes: [{
path: '/',
name: 'Index',
component: Index
}]
});
