vite 配置@路径

最新推荐文章于 2025-03-06 10:45:33 发布

原创最新推荐文章于 2025-03-06 10:45:33 发布 · 1.9k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #前端 #javascript #vue

在Vite的配置文件vite.config.ts中，使用defineConfig导入vue插件并设置resolvealias，将@符号映射到src目录。同时，在tsconfig.json中设置了baseUrl为./，并定义paths将@/*映射到src/*，实现源码路径的便捷引用。

1、在vite.config.ts里面声明

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import  {resolve}  from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {                                       // +++
    alias: {
      '@': resolve(__dirname, './src')         // +++
    }                                            // +++
  },
  base:'./'
})

2、在tsconfig.json里面写如下代码

 "baseUrl": "./",                                // +++
    "paths": {                                      // +++
      "@/*": ["src/*"]                              // +++
    } ,