vite中使用@配置路径别名过程示例

更新时间：2023年08月31日 14:30:56 作者：大甜甜

这篇文章主要为大家介绍了vite中使用@配置路径别名过程示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

打开 vite.config.ts 文件，配置 alias 参数

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
const path = require('path');
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve:{
    //设置路径别名
    alias: {
      '@': path.resolve(__dirname, './src'),
      '*': path.resolve('')
      },
  }
})

打开 tsconfig.json 文件

{
  "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": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

重新运行

使用

import Home from '@/views/index/index.vue'

以上就是vite中使用@配置路径别名过程示例的详细内容，更多关于vite使用@配置路径别名的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

Vue中的@blur事件当元素失去焦点时所触发的事件问题
这篇文章主要介绍了Vue中的@blur事件当元素失去焦点时所触发的事件问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
vue项目,代码提交至码云,iconfont的用法说明
这篇文章主要介绍了vue项目,代码提交至码云,iconfont的用法说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07
详解如何使用Vuex实现Vue后台管理中的角色鉴权
最近参与了公司一个新的B端项目的研发,从无到有搭建项目的过程中,遇到了关于项目鉴权的问题,这篇文章主要给大家介绍了关于如何使用Vuex实现Vue后台管理中的角色鉴权的相关资料,需要的朋友可以参考下
2022-05-05
vue element中axios下载文件（后端Python）
这篇文章主要介绍了vue element中axios下载文件（后端Python）的实例代码，非常不错，具有一定的参考借鉴价值 ,需要的朋友可以参考下
2019-05-05
vue elementUI tree树形控件获取父节点ID的实例
今天小编就为大家分享一篇vue elementUI tree树形控件获取父节点ID的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
Vue传参一箩筐(页面、组件)
这篇文章主要介绍了Vue传参一箩筐(页面、组件)，Vue页面、组件之间传参方式繁多，此处罗列出常用的几种方式，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-04-04
vue使用wavesurfer.js解决音频可视化播放问题
Wavesurfer.js是一款基于HTML5 canvas和Web Audio的声纹可视化插件，功能十分强大，在Vue框架中嵌入使用该插件，今天重点给大家介绍下vue使用wavesurfer.js解决音频可视化播放问题，感兴趣的朋友一起看看吧
2022-04-04
详解vue中的父子传值双向绑定及数据更新问题
这篇文章主要介绍了vue中的父子传值双向绑定及数据更新问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-06-06
Nuxt的路由配置和参数传递方式
这篇文章主要介绍了Nuxt的路由配置和参数传递方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11
详解Vue.js自定义tipOnce指令用法实例
这篇文章主要介绍了详解Vue.js自定义tipOnce指令用法实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-12-12