踩坑: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
解决方案
要么将vue.config.ts修改为 vue.config.js
要么使用 环境变量,在项目根目录中创建.env文件,在其中添加
VUE_CLI_SERVICE_CONFIG_PATH=./vue.config.ts
在vue.config.ts中,添加日志
启动项目,控制台打印出日志,代表配置文件生效了