配置vue+webpack踩过的坑

2019年7月23日 386次阅读 来源: 苏日俪格

本文是在该项目中踩坑得出的结论:

一、 关于”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.

《配置vue+webpack踩过的坑》 错误2

由于我用的是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

《配置vue+webpack踩过的坑》 错误1

TypeError: this._router.init is not a function

《配置vue+webpack踩过的坑》 错误2

四、 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

《配置vue+webpack踩过的坑》

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
    }]
});
    原文作者：苏日俪格
    原文地址: https://www.jianshu.com/p/c79d540bfca5
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞