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使用@配置路径别名的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

vue2中vue.config.js简单配置代理跨域的方法
在前后端的开发中总是难免会遇到前后端的跨域问题,下面这篇文章主要给大家介绍了关于vue2中vue.config.js简单配置代理跨域的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
2024-01-01
Vue实现英文字母大小写在线转换功能
在Web开发中,字符串处理是常见的需求之一,特别是在国际化应用中,对于文本的格式化处理尤为重要,本文将介绍如何使用Vue.js来构建一个简单的在线英文字母大小写转换工具,需要的朋友可以参考下
2024-09-09
Vue3 vue-devtools 调试工具下载安装使用教程
vue-devtools是一款基于chrome游览器的插件，用于调试vue应用，这可以极大地提高我们的调试效率，尤其是对于初学vue的朋友来说可谓是一大利器，这篇文章主要介绍了Vue3 vue-devtools 调试工具下载安装,需要的朋友可以参考下
2022-08-08
解决vue+ element ui 表单验证有值但验证失败问题
这篇文章主要介绍了vue+ element ui 表单验证有值但验证失败，本文通过实例代码给大家分享解决方案，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
2020-01-01
vue中修改浏览器图标和名字的几种方式
当针对不同客户需要提供不同的图标时,页面其他图标好替换,但是网页图标就不太一样了,下面这篇文章主要给大家介绍了关于vue中修改浏览器图标和名字的几种方式,需要的朋友可以参考下
2022-10-10
vue 封装一个高质量的表单通用组件
这篇文章主要为大家介绍了vue如何封装一个高质量的表单通用组件方法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-03-03
vue2.0中click点击当前li实现动态切换class
本篇文章主要介绍了vue2.0中click点击当前li实现动态切换class ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-06-06
vue项目预览excel表格功能(file-viewer插件)
这篇文章主要介绍了vue项目预览excel表格功能(file-viewer插件),本文分步骤结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
2023-10-10
vue中怎么区分不同的环境
这篇文章主要介绍了vue中怎么区分不同的环境，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
Vue中函数防抖节流的理解及应用实现
这篇文章主要介绍了Vue中函数防抖节流的理解及应用实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-04-04