我要用 vue.config.ts !!!
前言:
记录下自己玩 ts
的感动时刻。vue-cli
并不支持 vue-config.ts
, 详情参见这个 issue。作为一个 ts
魔怔人,我怎么能认输呢,鼓捣了半个下午,还真被我鼓捣出来了。
PS: issue 下面的 YiJie 是我。
首先阐述解决问题的办法
把冰箱打开,把大象放进去,把冰箱关上。(bushi)
- 首先安装俩个依赖
cross-env
ts-node
- 修改你的
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"
},
}
- 修改你的
tsconfig.json
{
"ts-node": {
"transpileOnly": true,
"compilerOptions": {
"module": "commonjs"
}
}
}
- 重命名你的
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
魔怔了(((逃
转载自:https://juejin.cn/post/7027757135471575054