这篇文章主要介绍“Vite如何配置路径别名”,在日常操作中,相信很多人在Vite如何配置路径别名问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Vite如何配置路径别名”的疑惑有所帮助!接下来,请跟着小编一起来
这篇文章主要介绍“Vite如何配置路径别名”,在日常操作中,相信很多人在Vite如何配置路径别名问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Vite如何配置路径别名”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
主技术栈:
Vite + vue3 + typescript
项目中版本情况:
"Vite": "3.0.0""Vue":"3.2.37""Ts":"4.6.4"
出现问题:
在配置完Vite后,正常开发没问题,但是Ts类型检查报错:
找不到模块"/xxx/xxx/xxx"或其相应的类型声明
首先要配置Vite,根据官方文档中的给出的类型说明:
Record<string, string> | Array<{ find: string | RegExp, replacement: string }>
由此可知:我们可以配置alias为一个对象,或一个 { find, replacement } 的数组
具体配置:
在根目录中的 vite.config.ts 中加入如下配置:(以下是我个人项目配置)
import { resolve } from "path"; // 导入 path 模块,帮助我们解析路径export default defineConfig({ resolve: { // 这里配置需要注意:Vite新版本resolve配置改为对象形式,如下: alias: [ { find: '@', replacement: resolve(__dirname, "src"), }, { find: 'comps', replacement: resolve(__dirname, "src/components"), }, { find: 'apis', replacement: resolve(__dirname, "src/apis"), }, { find: 'views', replacement: resolve(__dirname, "src/views"), }, { find: 'routes', replacement: resolve(__dirname, "src/router"), }, { find: 'store', replacement: resolve(__dirname, "src/store"), }, { find: 'utils', replacement: resolve(__dirname, "src/utils"), }, { find: 'styles', replacement: resolve(__dirname, "src/styles"), }, { find: 'layout', replacement: resolve(__dirname, "src/Layout"), }, { find: 'models', replacement: resolve(__dirname, "src/models"), }, { find: 'hooks', replacement: resolve(__dirname, 'src/hooks') } ], }})
这样配置完成后,项目中可以正常使用,但是Ts类型检查会提示错误,接着,配置根目录下的 ts.config.json 文件:(这里还是我个人的配置,分别对应Vite中配置好的别名)
注意:主要配置 baseUrl 和 paths 两个配置项即可,其他选项是初始化项目自动生成的
{ "compilerOptions": { "target": "ESNext", "useDefineForClassFields": true, "module": "ESNext", "moduleResolution": "node", "strict": true, "jsx": "preserve", "sourceMap": true, "resolveJSONModule": true, "isolatedModules": true, "esModuleInterop": true, "lib": ["ESNext", "DOM"], "skipLibCheck": true, "baseUrl": "./", "paths": { "@*.ts", "src*.d.ts", "src*.tsx", "src*.vue"], "references": [{ "path": "./tsconfig.node.json" }]}
配置完成后,Ts类型检查就不会报错了。(反应慢的重启一下vscode)
到此,关于“Vite如何配置路径别名”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注编程网网站,小编会继续努力为大家带来更多实用的文章!
--结束END--
本文标题: Vite如何配置路径别名
本文链接: https://www.lsjlt.com/news/355371.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-05-04
2024-05-04
2024-05-04
2024-05-04
2024-05-04
2024-05-04
2024-05-04
2024-05-04
2024-05-04
2024-05-04
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0