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)
<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 的构造函数
在 TypeScript 中使用 JS React 组件:JSX 元素类型“MyComponent”不是 JSX 元素的构造函数
使用 ts-node 进行测试时,TypeScript Express Api 类不是构造函数