【日常bug记录】Vue3 将 src 的目录设置为 @

关键是这两个文件的设置

  • vite.config.ts
    注意 extensions 的配置,我就是因为没加这个,卡了好久
typescript 复制代码
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path';
function resolve(dir) {
  return path.join(__dirname, dir);
}
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    extensions: ['.js', '.jsx', '.ts', '.tsx', '.json', '.vue'],
    alias: {
      "@": path.resolve("./src") // 相对路径别名配置,使用 @ 代替 src
    }
  }
})
  • tsconfig.json
json 复制代码
{
  "compilerOptions": {
    "baseUrl": "./", // 解析非相对模块的基地址,默认是当前目录
    "paths": { //路径映射,相对于baseUrl
      "@/*": ["src/*"] 
    },
    // 其他配置
}
相关推荐
李长鸿1 分钟前
vue3中的插槽和其他
vue.js
小桥风满袖2 分钟前
极简三分钟ES6 - 箭头函数
前端·javascript
bug_kada7 分钟前
前端后端3步联调:Cookie认证实战,让登录功能完美上线!
前端·javascript
hj5914_前端新手9 分钟前
深入分析 —— JavaScript 深拷贝
前端·javascript
jqq6669 分钟前
解析ElementPlus打包源码(二、buildFullBundle)
前端·javascript·vue.js
织_网18 分钟前
UniApp 页面通讯方案全解析:从 API 到状态管理的最佳实践
前端·javascript·uni-app
yuehua_zhang1 小时前
uni app 的app端 写入运行日志到指定文件夹。
前端·javascript·uni-app
EndingCoder4 小时前
调试技巧:Chrome DevTools 与 Node.js Inspector
javascript·网络·electron·node.js·vim·chrome devtools
知识分享小能手4 小时前
React学习教程,从入门到精通, React 入门指南:React JSX 语法知识点详解及案例代码(8)
前端·javascript·vue.js·学习·react.js·前端框架·anti-design-vue
学习3人组4 小时前
React 组件基础与事件处理
前端·javascript·react.js