Vue: TypeScript 和 AMD (UMD) 生成的 JS 代码错误 - 版本 2

对不起，但这对于一个不应在问题中解决的非常具体的设置来说确实是一个超出范围的问题。 问题仅针对源自 Vue 本身的错误报告。

@80LevelElf——我通过执行以下操作（

import { VueConstructor } from "vue";
const Vue = require("vue") as VueConstructor;  // cast as VueConstructor to get typings. 

const app = new Vue({
  template: "<h1>Hello World</h1>
});

@yyx990803——我处于类似但不同的情况。 我正在使用 TypeScript 的commonjs输出（没有 webpack）。 OP 和 I 之间的一个相似之处是我们都使用 TypeScript baseUrl选项。 TypeScript 中的标准导入肯定有问题。

我也在使用 Vue 2.5.13。 我正在 Node 8.9.3 和 TypeScript 2.6 上设置 SSR。 我的tsconfig.json看起来像这样：

{
  "compilerOptions": {
    "outDir": "build",
    "target": "es6",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "rootDir": "./src",
    "baseUrl": "./src",
    "noUnusedLocals": true
  },
  "exclude": [
    "node_modules",
    "typings"
  ]
}

我尝试了许多其他解决方法，包括尝试通过compilerOptions.paths属性加载 vue.esm.js 文件，但没有成功。 我得到了与 OP 完全相同的vue_1.default is not a constructor错误。

我在这里复制了一个副本并打开了一个新问题

我遇到了同样的问题。

根据我的理解，vue.js 文件应该像 vue-class-component 一样设置exports.default变量。

vue-class-component.js（第 192 行）：
exports['default'] = Component$1;

vue-class-component 文件有一个特殊情况来处理 Vue 缺少的默认导出，这就是它起作用的原因。

vue-class-component.js（第 12 行）：
Vue = Vue && Vue.hasOwnProperty('default') ? Vue['default'] : Vue;

不幸的是，TypeScript 2.5 编译器没有输出处理缺失默认值的特殊情况。 但是， TypeScript 2.7有一个新选项 ( esModuleInterop ) 可以解决这个问题。

{
    "compilerOptions": {
        "module": "amd",
        "esModuleInterop": true,
        ...
    },
    ...
}

将esModuleInterop设置为true ，输出包含一个名为__importDefault的函数，该函数正确处理缺少的默认属性。

var __importDefault = (this && this.__importDefault) || function (mod) {
  return (mod && mod.__esModule) ? mod : { "default": mod };
}
define(["require", "exports", "vue"], function (require, exports, vue_1) {
  "use strict";
  Object.defineProperty(exports, "__esModule", { value: true });
  vue_1 = __importDefault(vue_1);
  var app = new vue_1.default({
        ...
  });
});