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 还有哪些厉害属性

相关推荐
程序员爱钓鱼11 分钟前
Go语言中的反射机制 — 元编程技巧与注意事项
前端·后端·go
GIS之路32 分钟前
GeoTools 结合 OpenLayers 实现属性查询(二)
前端·信息可视化
just小千34 分钟前
重学React(二):添加交互
javascript·react.js·交互
烛阴40 分钟前
一文搞懂 Python 闭包:让你的代码瞬间“高级”起来!
前端·python
AA-代码批发V哥43 分钟前
HTML之表单结构全解析
前端·html
qq_589568101 小时前
element-plus按需自动导入的配置 以及icon图标不显示的问题解决
开发语言·javascript·ecmascript
聪聪的学习笔记1 小时前
【1】确认安装 Node.js 和 npm版本号
前端·npm·node.js
小磊哥er1 小时前
【前端工程化】你知道前端编码规范包含哪些内容吗
前端
菌菇汤1 小时前
uni-app实现单选,多选也能搜索,勾选,选择,回显
前端·javascript·vue.js·微信小程序·uni-app·app
Ramos丶1 小时前
【ABAP】 从无到有 新建一个Webdynpro程序
java·前端·javascript