vite+ts配置之项目别名以及后缀省略

背景

懒,为了少些几个字母

对比

未配置别名

我们在src/views/demo/index.vue文件下面想引入src/components/gd-upload组件,我们需要下面这种方式

html 复制代码
<template>
  <div>
    <GdUpload />
  </div>
</template>

<script setup lang="ts">
  import GdUpload from '../../components/gd-upload';
</script>

<style scoped></style>
配置了别名
html 复制代码
<template>
  <div>
    <GdUpload />
  </div>
</template>

<script setup lang="ts">
  import GdUpload from '@com/gd-upload';
</script>

<style scoped></style>

我们可以发现,配置了别名之后,我们从import GdUpload from '../../components/gd-upload'变成了import GdUpload from '@com/gd-upload'

好处:
  • 代码写的少
  • 不管嵌套多少级文件夹,我们引入文件的位置都很清晰

开始配置

vite.config.ts
ts 复制代码
export default defineConfig({
	... 其他配置
	resolve: {
		// 导入时想要省略的扩展名列表。注意,不 建议忽略自定义导入类型的扩展名(例如:.vue),因为它会影响 IDE 和类型支持。
	    extensions: ['.js', '.ts', '.json', '.tsx'],
	    // 别名配置 一般常用@ ~ 这些符号去配置,不过也不强求,看自己喜好
	    alias: {
	      '@': path.resolve(__dirname, './src'),
	      // 这个配置不配置都可以,看自己的需求
	      '@com': path.resolve(__dirname, './src/components'),
	    },
	},
	... 其他配置
})
tsconfig.app.json或者tsconfig.json

因为我的tsconfig配置是分了多个文件,所以我就在tsconfig.app.json中配置了

  • baseUrl
  • paths
json 复制代码
 "compilerOptions": {
    "composite": true,
    // 增加了浏览器特有的dom相关api
    "lib": ["ESNext", "DOM", "DOM.Iterable"],
    "types": ["node"],
    "jsx": "preserve",
    "jsxImportSource": "vue",
    // 主要是baseUrl以及path这两个属性
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"],
      "@com/*": ["src/components/*"]
    }
  },
相关推荐
像风一样自由20207 分钟前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem1 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊1 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术1 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
GISer_Jing1 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止1 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall1 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴2 小时前
简单入门Python装饰器
前端·python
袁煦丞2 小时前
数据库设计神器DrawDB:cpolar内网穿透实验室第595个成功挑战
前端·程序员·远程工作
天天扭码2 小时前
从图片到语音:我是如何用两大模型API打造沉浸式英语学习工具的
前端·人工智能·github