likes
comments
collection
share

我要用 vue.config.ts !!!

作者站长头像
站长
· 阅读数 22

前言:

记录下自己玩 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"
  },
}
  1. 修改你的 tsconfig.json
{
  "ts-node": {
    "transpileOnly": true,
    "compilerOptions": {
      "module": "commonjs"
    }
  }
}
  1. 重命名你的 vue.config.jsvue.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 魔怔了(((逃

转载自:https://juejin.cn/post/7027757135471575054
评论
请登录