踩坑:vue.config.ts 不起作用

305 阅读1分钟

踩坑:vue.config.ts 不起作用

问题来源

在使用vite + ts 项目时,配置文件 vite.config.ts 很自然。

但是,vue2 项目使用的是vue-cli搭建的,底层还是webpack,没有使用新的vite搭建,这时候即使是ts项目, 也不能直接使用 vue.config.ts,真是应了那句话,vue2对ts的支持不好啊!

项目使用的是vue2+ts

"vue": "^2.7.14",
"@vue/cli-service": "^4.5.19",
"typescript": "^4.3.5",

开始使用的是vue.config.ts , 结果发现改port端口号不管用,修改proxy不管用,找了半天原因,github搜了半天也没人反馈,将pnpm换为yarn也不行, 后来尝试了一下改为 vue.config.js 就生效了!!!!

源码分析

通过查看node_modules中的 @vue/cli-service包的源代码,可以发现,读取vue-cli配置项的来源有三个路径, 分别为 环境变量中的自定义路径,vue.config.js 以及 vue.config.mjs

image.png

解决方案

要么将vue.config.ts修改为 vue.config.js

要么使用 环境变量,在项目根目录中创建.env文件,在其中添加

VUE_CLI_SERVICE_CONFIG_PATH=./vue.config.ts

在vue.config.ts中,添加日志

image.png

启动项目,控制台打印出日志,代表配置文件生效了

参考资料

vue.config.ts不起作用

vue-cli 使用 npm script 指定配置文件路径, 在 windows 下不能正常识别