Nuxt 2中如何在nuxt.config里引用TypeScript模块？

问题描述 #

在Nuxt 2中实现动态路由生成时，尝试在nuxt.config中通过const { pairwiseTeams } = require('~/helpers/NFL/teams')引入TypeScript模块，运行nuxt命令时出现Cannot find module '~/helpers/NFL/teams'错误。

相关代码如下：

nuxt.config代码 #

const { pairwiseTeams } = require('~/helpers/NFL/teams');

export default {
  mode: 'universal',
  ...
  generate: {
    async routes() {
      return teamMatchups = pairwiseTeams.map(([teamA, teamB]) => `/nfl/matchups/${teamA}-${teamB}`);
    },
  },
}

helpers/NFL/teams.ts代码 #

export const pairwiseTeams = [['ARI', 'ATL'], ...]

tsconfig.json路径配置 #

"paths": {
  "~/*": ["./*"],
  "@/*": ["./*"]
},

解决方案 #

方案1：使用Node.js识别的相对路径引入 #

Node.js的require函数不会解析tsconfig.json中的路径别名（~/@），直接改用相对路径并指定.ts后缀即可：

const { pairwiseTeams } = require('./helpers/NFL/teams.ts');

方案2：将nuxt.config转为TypeScript并使用ES模块导入 #

如果想保留路径别名的使用，可以通过ts-node让Node.js支持TypeScript模块：

1. 安装依赖：

npm install ts-node typescript --save-dev

2. 将nuxt.config.js重命名为nuxt.config.ts
3. 在新的配置文件中使用ES模块导入：

import { pairwiseTeams } from '~/helpers/NFL/teams';

export default {
  mode: 'universal',
  ...
  generate: {
    async routes() {
      return pairwiseTeams.map(([teamA, teamB]) => `/nfl/matchups/${teamA}-${teamB}`);
    },
  },
}

此时ts-node会读取tsconfig.json中的路径配置，解析~别名。

额外优化 #

原generate.routes中的代码可以简化，无需额外赋值变量：

async routes() {
  return pairwiseTeams.map(([teamA, teamB]) => `/nfl/matchups/${teamA}-${teamB}`);
}

内容的提问来源于stack exchange，提问作者user4815162342