logo标签列表

Vue+Webpack，系统告诉我：“模块构建失败：TypeError：this._init不是函数”。

javascriptwebpackvue.js
3

我不知道该怎么修复它，我已经搜索了太多信息，所有人都告诉我没有安装npm模块，但我的“package.json”文件已经安装了它们。

我已经安装了所有的npm模块。

dependencies": {
"babel-core": "^6.22.1",
"babel-loader": "^6.2.10",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-preset-es2015": "^6.22.0",
"babel-runtime": "^6.22.0",
"css-loader": "^0.26.1",
"style-loader": "^0.13.1",
"vue": "^2.1.10",
"vue-hot-reload-api": "^2.0.8",
"vue-html-loader": "^1.2.3",
"vue-loader": "^10.3.0",
"vue-template-compiler": "^2.1.10",
"webpack": "^2.2.1",
"webpack-dev-server": "^2.3.0"}

其他文件
webpack.config.js

module.exports={
entry:'./main.js',

output:{
    path:__dirname,
    filename:'build.js'
},

module:{
    loaders:[
        {test:/\.vue$/, loader:'vue'},
        {test:/\.js$/, loader:'babel-loader', exclude:/node_modules/}
    ]
}};

main.js

import Vue from 'vue'
import App from './App.vue'

new Vue({
    el:'body',
    components:{
        app:App
    }
});

App.vue

<template>
    <h1>welcome Vue</h1>
</template>

<script type="text/javascript"></script>

<style type="text/css"></style>

和最终文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="bundle.js"></script>
</head>
<body>
<div id="app">
    <app></app>
</div>
</body>
</html>

当我启动webpack-dev-server时，命令行告诉我TypeError: this._init is not a function。
（附注：我的英语不好，所以...）
我已经解决了这个问题，在“webpack.config.js”文件中。
{test:/\.vue$/, loader:'vue'}

转换为

{test:/.vue$/, loader:'vue-loader'}

因为我使用的是Vue 2.0版本。

你使用的是哪个版本的Vue？在Vue 2中，你不能在“el”属性中针对html或body标签进行定位。 - Gerard Reches
我使用的是Vue 2，但是当我将el更改为“＃xxx”时，这个错误仍然存在。 - Claire
3
在使用某些加载器进行初始化时，Webpack 2 不允许省略单词“loader”。因此，您需要明确定义包括“-loader”在内的完整加载器名称，例如“babel-loader”、“vue-loader”、“file-loader”等等。 - Belmin Bedak
1个回答
0

在 webpack.config.js 文件中的那一行应该使用全名：

{test:/\.vue$/, loader:'vue-loader'},
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接