【053】使用vue时Module build failed: TypeError: this._init is not a function错误的解决方法

原创已于 2022-05-08 17:04:44 修改 · 6.4w 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #Webpack #vuejs2

于 2016-11-28 15:31:47 首次发布

前端专栏收录该内容

28 篇文章

订阅专栏

本文介绍了一个Vue项目中Webpack配置不正确导致的问题及解决方法。主要原因是vue-loader配置错误，未使用完整名称。

错误描述

整个项目目录结构如下：

src
- hello.vue
- main.js
index.html
package.json
webpack.config.js

package.json

{
  "name": "test-typeof-vue",
  "version": "0.0.1",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --port 28080 --open --inline --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  "devDependencies": {
    "babel-core": "6.18.2",
    "babel-loader": "6.2.8",
    "babel-preset-es2015": "6.18.0",
    "cross-env": "3.1.3",
    "css-loader": "0.26.0",
    "file-loader": "0.9.0",
    "style-loader": "0.13.1",
    "vue-loader": "9.9.5",
    "webpack": "2.1.0-beta.27",
    "webpack-dev-server": "2.1.0-beta.11"
  },
  "dependencies": {
    "vue": "2.1.3"
  }
}

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"> <title>bmsclient</title>
  </head>
  <body>
    <div id="app"><hello></hello></div>
    <script src="/dist/build.js"></script>
  </body>
</html>

webpack.config.js

var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  module: {
    rules: [
      {
          test: /\.css$/,
          use: [
              {
                  loader: 'style-loader'
              }, {
                  loader: 'css-loader'
              }
          ]
      },
      {
        test: /\.vue$/,
        loader: 'vue',
        options: {
          // vue-loader options go here
        }
      },
      {
         test: /\.js$/,
         loader: 'babel-loader',
         exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  resolve: {
    alias: {
      
    }
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true
  },
  devtool: '#eval-source-map',
  plugins: [
  ]
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

hello.vue

<template>
  <div>
    <h1>Hello</h1><span>{{zca}}</span>
  </div>
</template>
<script>
export default {
  data:function(){
    return {zca: "zca"}
  },
  mounted: function() { }
}
</script>
<style></style>

main.js

import Vue from "vue/dist/vue.common.js";
import hello from "./hello.vue"
new Vue({
    el: "#app",
    components:{hello:hello}
});

报错如下：

VM219:1Uncaught Error: Module build failed: TypeError: this._init is not a function
    at Object.Vue$2 (F:\workspaceSet\vsc\test-typeof-vue\node_modules\vue\dist\vue.runtime.common.js:3272:8)
    at Object.Vue$2 (F:\workspaceSet\vsc\test-typeof-vue\node_modules\vue\dist\vue.runtime.common.js:3272:8)
    at eval (eval at <anonymous> (http://localhost:28080/dist/build.js:1250:1), <anonymous>:1:7)
    at Object.<anonymous> (http://localhost:28080/dist/build.js:1250:1)
    at __webpack_require__ (http://localhost:28080/dist/build.js:658:30)
    at fn (http://localhost:28080/dist/build.js:84:20)
    at eval (eval at <anonymous> (http://localhost:28080/dist/build.js:949:1), <anonymous>:3:69)
    at Object.<anonymous> (http://localhost:28080/dist/build.js:949:1)
    at __webpack_require__ (http://localhost:28080/dist/build.js:658:30)
    at fn (http://localhost:28080/dist/build.js:84:20)
    at Object.<anonymous> (http://localhost:28080/dist/build.js:1276:18)
    at __webpack_require__ (http://localhost:28080/dist/build.js:658:30)


./src/hello.vue
Module build failed: TypeError: this._init is not a function
    at Object.Vue$2 (F:\workspaceSet\vsc\test-typeof-vue\node_modules\vue\dist\vue.runtime.common.js:3272:8)
 @ ./src/main.js 2:0-32
 @ multi main

解决方法

这个例子中Webpack的版本是2.1.0-beta.27。在这个版本中，loader不能用简写省去 -loader 的形式。因此vue-loader应该使用全拼的形式。
webpack.config.js 文件应该改成这样：

     {
        test: /\.vue$/,
        loader: 'vue-loader', /* 原来的'vue'改成'vue-loader' */
        options: {
          // vue-loader options go here
        }
      },

改完后，系统就正常运行了。