vue webpack 编译 遇到错误TypeError: this._init is not a function

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue webpack 编译 遇到错误TypeError: this._init is not a function相关的知识,希望对你有一定的参考价值。

参考技术A <template>
<h1>测试.........</h1>
<template>

var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var config =
devServer:
hot: true, contentBase: './dist',
progress: true,
inline: true,
historyApiFallback: true
,
entry:
main:path.resolve(__dirname, './dist/main.js'), //第三方插件单独打包 vendors: ['./dist/lib/bootstrap.min.js','./dist/lib/parsley/parsley.js']
,
output:
path:__dirname + '/build', publicPath: '/', filename:'./[name].js'
,
module:
loaders:[
test: /.js[x]?$/,exclude: /node_modules|vue/dist|vue-router/|vue-loader/|vue-hot-reload-api//,loader: 'babel',
test: /.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader"),
test: /.(jpg|png|gif)$/,loader: 'url?limit=90000',
test: /.woff[2]?$/, loader: "url?limit=10000&minetype=application/font-woff",//url-loader test: /.ttf$/, loader: "file",
test: /.eot$/, loader: "file",
test: /.svg$/, loader: "file",
test: /.vue$/, loader: 'vue'
] ,
plugins:[
new ExtractTextPlugin("main.css"),
new webpack.HotModuleReplacementPlugin(),
new webpack.ProvidePlugin( $: "jquery", jQuery: "jquery", "window.jQuery": "jquery" ),
new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js')
]
module.exports = config;

Vue模块未编译

【中文标题】Vue模块未编译【英文标题】:Vue module is not compiling 【发布时间】:2021-04-23 08:34:07 【问题描述】:

我正在关注 YouTube 教程,使用 Laravel 和 Vue.js 的待办事项列表应用程序,在终端“npm run hot”中运行 27 分钟时遇到以下问题:

webpack 编译时出现 1 个错误 ./resources/js/app.js 4:0-28 中的错误 未找到模块:错误:无法解析 'C:\xampp\htdocs\todolist2\resources\js' 中的 './vue/app'

问题出现在文件 app/resources/js/app.js

require('./bootstrap');
import Vue from 'vue'

import App from './vue/app'

const app = new Vue (
    el: '#app',
    components: App
);

文件结构是

js ---vue/app.vue app.js

我已经预先运行了 npm install 并且 Vue 在 app/node_modules 文件夹中

关于如何解决的任何想法?谢谢!

【问题讨论】:

我不了解 app/node_modules 路径。您的意思是您的 node_modules 文件夹在 app 文件夹内,而不是在根路径中? 抱歉,Emtiaz! node_modules 位于根路径中。 【参考方案1】:

在你的webpack.mix.js最后加.vue()这样

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]).vue();

【讨论】:

以上是关于vue webpack 编译 遇到错误TypeError: this._init is not a function的主要内容,如果未能解决你的问题,请参考以下文章

Vue模块未编译

如何使用编译器包含的构建(Vue、Typescript、Webpack)

Vue用webpack编译时用注释替换HTML

使用 Getter 和 Setter 计算的 Vue 属性不会在 Webpack 中编译

带有 webpack 别名的 Vue-typescript 错误,找不到路径

带有 Rails(webpacker)的 Vue 错误:“无法获取 /”