我要用 vue.config.ts !!!

前言：

记录下自己玩 ts 的感动时刻。vue-cli 并不支持 vue-config.ts, 详情参见这个 issue。作为一个 ts 魔怔人，我怎么能认输呢，鼓捣了半个下午，还真被我鼓捣出来了。

PS: issue 下面的 YiJie 是我。

首先阐述解决问题的办法

把冰箱打开，把大象放进去，把冰箱关上。（bushi）

1. 首先安装俩个依赖 cross-env ts-node
2. 修改你的 package.json，因为我 yarn 用的比较多，所以这个是 yarn 的解决办法，其他的包管理器照葫芦画瓢即可。

{
  "scripts": {
    "service": "cross-env VUE_CLI_SERVICE_CONFIG_PATH=./vue.config.ts ts-node ./node_modules/@vue/cli-service/bin/vue-cli-service.js",
    "serve": "yarn service serve"
  },
}

3. 修改你的 tsconfig.json

{
  "ts-node": {
    "transpileOnly": true,
    "compilerOptions": {
      "module": "commonjs"
    }
  }
}

4. 重命名你的 vue.config.js 为 vue.config.ts，然后补上类型

import type { ProjectOptions } from '@vue/cli-service'

module.exports = {
  // ...
} as ProjectOptions

问题如何被解决的

• 翻了半天 vue-cli issue 看到没有最好的解决方案，全都是用 jsdoc 的，还从 18 年拖到了 21 年，忍不了了。

• 翻 vue-cli 的源码，找到 vue-cli-service 命令对应的 package 。由于 vue-cli 使用了 monorepo ，所以需要一点 monorepo 的知识。

• 找到对应的 bin 目录与 script 文件，开始分析代码在哪里加载的 file ，最快的方法是全局搜索 vue.config.js。

• 找到了会加载 VUE_CLI_SERVICE_CONFIG_PATH, vue.config.js, vue.config.cjs 三个变量，接下来只需要注入 VUE_CLI_SERVICE_CONFIG_PATH 这个环境变量为我们想要的 vue.config.ts。

• 这里可以使用 cross-env 来设置环境变量

• 然后我们需要我们的运行环境支持 ts ，这里我们使用 ts-node 去运行我们的代码。

  这也是我们为什么需要这俩个包的原因

• 然后我们使用这俩个包达到我们的目的就组合出了上面的 service 指令

• 然后我们需要配置一下下 ts-node ，所以修改一下 tsconfig.json ，让他 commonjs 起来。

• 到这里我们的问题就解决了

总结

ts 魔怔了（（（逃