Vue3 + Vite + TS,使用 配置项目别名属性:resolve

使用 resolve 配置全局项目路径别名

1.优化了开发中单页面引用其他模块的路径复杂性

2.妥妥解决了,组件复用当中提高开发效率

js 复制代码
// 不使用配置
import { useStore } from '../../../stores'
// 使用配置 @ 可根据开发者需求任意定义,较多@
import { useStore } from '@/stores'
具体配置
js 复制代码
// vite.config.ts
// 这里用到了node内的path模块,确定当前文件在项目中的准确路径,并且配置别名
import path from 'path'
export default defineConfig({
  ......
  resolve:{
    alias:{
      '@':path.resolve(__dirname,'./src')
    },
    // extensions:解析模块时自动添加的文件扩展名。
    // 默认情况下,Vite会解析.mjs、.js、.ts、.jsx、.tsx、.json等扩展名。
    // 但你也可以根据需要进行自定义,
    extensions: ['.ts','.json', '.vue'] // 自动解析这些扩展名
  }
})
配置后出现的异常情况

如出现:找不到模块"@/..."或其相应的类型声明。

还需在tsconfig.json、tsconfig.app.json内添加如下配置

js 复制代码
{
  ...
  "compilerOptions": {
    ...
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

注意了,配置了以上文件后还出现异常情况,重启一下编辑器试试

快来看看 resolve 还有哪些厉害属性

相关推荐
qb12 小时前
vue3.5.18源码-编译-入口
前端·vue.js·架构
小桥风满袖12 小时前
极简三分钟ES6 - 类与继承
前端·javascript
虫无涯12 小时前
【分享】基于百度脑图,并使用Vue二次开发的用例脑图编辑器组件
前端·vue.js·编辑器
子兮曰12 小时前
🚀99% 的前端把 reduce 用成了「高级 for 循环」—— 这 20 个骚操作让你一次看懂真正的「函数式折叠」
前端·javascript·typescript
wifi歪f12 小时前
📦 qiankun微前端接入实战
前端·javascript·面试
小桥风满袖12 小时前
极简三分钟ES6 - Symbol
前端·javascript
子兮曰12 小时前
🚀Map的20个神操作,90%的开发者浪费了它的潜力!最后的致命缺陷让你少熬3天夜!
前端·javascript·ecmascript 6
NewChapter °13 小时前
如何通过 Gitee API 上传文件到指定仓库
前端·vue.js·gitee·uni-app
练习时长两年半的Java练习生(升级中)13 小时前
从0开始学习Java+AI知识点总结-30.前端web开发(JS+Vue+Ajax)
前端·javascript·vue.js·学习·web
vipbic13 小时前
关于Vue打包的遇到模板引擎解析的引号问题
前端·webpack