当前位置: 首页 > Web前端 > vue.js

vscode中Vue别名路径小技巧

时间:2023-03-31 18:38:36 vue.js

开发场景使用Vue框架进行项目开发时,在vue.config.js中配置路径别名后,在其他页面导入组件、css、静态文件路径时,使用Path别名做不是智能感知路径。vscode中虽然安装了PathIntellisense插件,但是没有任何作用。这样容易出现路径拼写错误等低效率问题,同时也会降低开发效率。解决方法是在项目package.json同级目录下创建文件jsconfig.json,解决不提示别名路径的问题。(配置保存文件后需要重启编辑器才能生效,而且只能识别.vue和.js结尾的文件,css文件等静态文件还是没有提示,不推荐!!!)//.jsconfig.json{"compilerOptions":{"baseUrl":".","paths":{"@/\*":\['src/\*'\],"a/\*":\["src/assets/\*"\],"c/\*":\["src/components/\*"\],...}},"include":\["./src/\*\*/\*.vue","./src/\*\*/\*.js"\],"exclude":\["node\_modules"\]}在setting中配置PathIntellisencevscode的.json(该方案是最优选的,它可以识别任何格式的文件,覆盖范围最广。当别名发生变化时,只需要修改配置即可)//setting.json"path-intellisense.映射":{"a":"${workspaceRoot}/src","c":"${workspaceRoot}/src/components",...}