如何使用 TypeScript 支持创建 Nuxt 构建？答案

【问题标题】：How to create Nuxt build with TypeScript support?如何使用 TypeScript 支持创建 Nuxt 构建？
【发布时间】：2019-07-06 06:23:13
【问题描述】：

我正在尝试使用命令“npm run build”构建一个 nuxtjs 应用程序，该命令正在执行“nuxt build”。

但是，构建失败，看起来 nuxt 不知道如何编译 Typescript 代码。但有趣的是，“npm run dev”命令可以正常工作，并且应用程序可以正常工作。只是生产构建失败了。

我注意到，如果我从我的单个文件组件中的脚本标记中删除 lang="ts"，错误就消失了，但是当然，打字稿代码不会编译并且会发生其他错误。我尝试了各种 tsconfig.json 配置，但没有一个有效。我在 package.json 文件的依赖项中包含 typescript 和 ts-loader 模块。

"ts-loader": "^5.3.3",
"typescript": "^3.3.3",

这是我在运行“npm run build”时收到的错误消息的示例

ERROR in ./pages/index.vue?vue&type=script&lang=ts& (./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib??ref--0-2!./node_modules/ts-loader??ref--0-3!./node_modules/babel-loader/lib??ref--4-0!./node_modules/ts-loader??ref--4-1!./node_modules/vue-loader/lib??vue-loader-options!./pages/index.vue?vue&type=script&lang=ts&)
Module build failed (from ./node_modules/thread-loader/dist/cjs.js):
Thread Loader (Worker 4)
Cannot read property 'errors' of undefined

    at successfulTypeScriptInstance (../node_modules/ts-loader/dist/instances.js:90:28)
    at Object.getTypeScriptInstance (../node_modules/ts-loader/dist/instances.js:34:12)
    at Object.loader (../node_modules/ts-loader/dist/index.js:17:41)
 @ ./pages/index.vue?vue&type=script&lang=ts& 1:0-404 1:420-423 1:425-826 1:425-826
 @ ./pages/index.vue
 @ ./.nuxt/router.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi ./.nuxt/client.js

这是我的 tsconfig.json

{
    "compilerOptions": {
        "target": "es5",
        "lib": [
            "dom",
            "es2015"
        ],
        "module": "es2015",
        "moduleResolution": "node",
        "experimentalDecorators": true,
        "noImplicitAny": false,
        "noImplicitThis": false,
        "strictNullChecks": true,
        "removeComments": true,
        "suppressImplicitAnyIndexErrors": true,
        "allowSyntheticDefaultImports": true,
        "allowJs": true,
        "baseUrl": ".",
        "paths": {
            "~/*": [
                "./*"
            ]
        },
        "noUnusedLocals": true,
        "resolveJsonModule": true,
        "esModuleInterop": true
    }
}

有没有人知道如何让 NuxtJs 与 Typescript 一起用于生产构建，而不仅仅是开发？

谢谢

【问题讨论】：

标签： typescript vue.js nuxt.js

【解决方案1】：

最终的解决方案（如@Aldarund）建议使用 nuxt-ts，但没有任何额外的 typescript 模块，例如 typescript 或 nuxt-typescript。你甚至不需要 ts-loader 模块。并且 nuxt.config.js 必须重命名为 nuxt.config.ts。

更不用说你必须在你的 npm 脚本中只使用 nuxt-ts 而不是普通的 nuxt。

2019 年 4 月编辑： 从 Nuxt.js 的 2.5.0 版本开始，不再需要 nuxt-ts 来支持 typescript。 Nuxt.js 通过安装 @nuxt/typescript 正式支持 typescript。

Nuxt v2.5.0 release notes

【讨论】：

对我来说重要的是“删除typescript”。谢谢。

【解决方案2】：

你应该使用 nuxt-ts

在此处查看一些文档和示例

https://nuxtjs.org/guide/typescript

更多文档即将推出

【讨论】：

谢谢，如果我找不到基本 Nuxt.js 的解决方案，我会尝试一下 :)
@papazulu ye 但它只是基本的 nuxt，它是使用 ts 和 nuxt 的新官方方式