Vueは、Typescript＆webpackを使用してコンストラクタエラーではありません

Question

私はTypescript & Webpackを使用しています。私のコードは以下の通りです。私はクロームでそれを実行していることだし、それはエラーを与える：

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> 

Answer 1

vue/dist/vue.jsファイルにはデフォルトの書き出しはありませんが、VueはESモジュールのバージョンも提供します：vue/dist/vue.esm.js。 importステートメントを持つESモジュールとして使用しているので、これを使用します。

あなたの別名は次のようになります。

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