vue不是构造函数错误,使用Typescript和webpack

Posted

技术标签:

【中文标题】vue不是构造函数错误,使用Typescript和webpack【英文标题】:Vue is not a constructor error, using Typescript & webpack 【发布时间】:2018-05-01 15:36:39 【问题描述】:

我正在使用 Typescript 和 Webpack。我的代码如下。我在 chrome 中运行它,它给出了错误:

Uncaught TypeError: vue_1.default is not a constructor
    at Object.defineProperty.value (Index.ts:3)
    at __webpack_require__ (bootstrap f29fbbb047d131556dcf:19)
    at Object.defineProperty.value (bootstrap f29fbbb047d131556dcf:62)
    at bootstrap f29fbbb047d131556dcf:62

我已经添加了导入,也做了解析 -> 别名 -> vue 部分。并尝试了一大堆其他的东西,但没有奏效。我也玩过 tsconfig 文件,但没有运气。

我该如何解决这个问题?

webpack.config.js

var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');

module.exports = 
    context: __dirname,//another dir +"/app"
    // devtool: debug ? "inline-sourcemap" : null,

    // Enable sourcemaps for debugging webpack's output.
    devtool: "source-map",

    entry: "./code/client/scripts/Index.ts",
    output: 
        path: __dirname + "/code/client/views",
        filename: "scripts.min.js"
    ,
    plugins: debug ? [] : [
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.optimize.UglifyJsPlugin(mangle: false, sourcemap: false),
        new webpack.IgnorePlugin(/fs/),
        new webpack.DefinePlugin(
            'process.env': 
                NODE_ENV: '"production"'
            
        )
    ],
    node: 
        fs: 'empty',
        child_process: 'empty',
    ,

    resolve: 
        // Add '.ts' and '.tsx' as resolvable extensions.
        alias: 
            vue: 'vue/dist/vue.js'
        ,
        extensions: [".ts", ".tsx", ".js", ".json"]
    ,

    module: 
        rules: [
            // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
             test: /\.tsx?$/, loader: "awesome-typescript-loader" ,

            // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
             enforce: "pre", test: /\.js$/, loader: "source-map-loader" 
        ]
    ,
;

tsconfig.js


  "compilerOptions": 
    "module": "commonjs",
    "target": "es2015",
    "noImplicitThis": true,
    "sourceMap": true,
    "strictNullChecks": true,
    "removeComments": false,
    "moduleResolution": "node",
    "types": [
      "node",
      "mocha",
      "chai"
    ],
    "typeRoots": [
      "node_modules/@types"
    ]
  ,
  "exclude": [
    "node_modules"
  ]

index.ts

import Vue from "vue"

var app = new Vue(
    el: '#app',
    data: 
        message: 'Hello Vue!',
    
)
console.log(app)

html

<div id="app">
    <p> message </p>
    <input v-model="message">
</div>

【问题讨论】:

【参考方案1】:

vue/dist/vue.js 文件没有默认导出,但 Vue 也提供了 ES 模块版本:vue/dist/vue.esm.js。您想使用这个,因为您将它用作带有 import 语句的 ES 模块。

您的别名应该是:

alias: 
    'vue': 'vue/dist/vue.esm.js'
,

【讨论】:

以上是关于vue不是构造函数错误,使用Typescript和webpack的主要内容,如果未能解决你的问题,请参考以下文章

TypeError:EventEmitter 不是新 MapboxGeocoder 的构造函数

Vue 不是构造函数

在 TypeScript 中使用 JS React 组件:JSX 元素类型“MyComponent”不是 JSX 元素的构造函数

使用 ts-node 进行测试时,TypeScript Express Api 类不是构造函数

获取未捕获的 TypeError: ...default 不是构造函数 - 来自 Vue 组件

React - 类构造函数错误中的 Typescript 默认值