在没有 webpack 的情况下使用 VueJs 和 Typescript

Posted 2023-02-22

【中文标题】在没有 webpack 的情况下使用 VueJs 和 Typescript

【英文标题】：Use VueJs and Typescript without webpack

【发布时间】：2018-10-01 21:31:32

【问题描述】：

我正在尝试用最少的配置来配置一个项目。我想使用 VueJS 和 Typescript。

我将vue.js 文件和一个脚本 添加到我的主页：

<script src="~/lib/vue/dist/vue.js"></script>
<script src="~/js/site.js" ></script>

一切正常。

但是如果我想使用 Typescript，Vue class 是找不到的：

Symbol 'Vue' cannot be properly resolved, probably it is located in inaccessible module

因为定义文件使用export，所以必须使用Vue作为模块。

如果我添加导入，它会编译，但它会在输出中并且在浏览器中不起作用。

有没有办法在不使用 webpack 的情况下完成这项工作？

【问题讨论】：

为什么不能在浏览器中运行？

我有一个错误：SCRIPT1086: SCRIPT1086: Module import or export statement unexpected here

我认为没有捆绑器就没有办法做到这一点，因为 vue 已经在您的示例中预先打包，因此很可能在那时与 typescript 不兼容。我强烈建议你使用新的 vue-cli 版本 3，因为它允许你设置一个没有配置的 typescript vue 项目。

看来你是对的。谢谢

【参考方案1】：

默认情况下必须导入 vue 的 Typescript 类型。您可以使用如下自定义类型定义文件让它们在不导入的情况下工作：

创建新文件 global.d.ts - 名称无关紧要

//global.d.ts
import  VueConstructor  from 'vue'

declare global 
    const Vue: VueConstructor

【讨论】：

这在const Vue: VueConstructor 行与Error TS2403 (TS) Subsequent variable declarations must have the same type. Variable 'Vue' must be of type 'typeof import, but here has type 'VueConstructor<Vue>' 失败