关于配置src别名中的path.resolve(“./src“)

vite.config.ts

复制代码
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": path.resolve("./src") // 相对路径别名配置,使用 @ 代替 src
    }
  }
})

path.resolve 方法用于将路径或路径片段解析为绝对路径。

上面代码中**path.resolve(__dirname, 'src')** 也可以写成 path.resolve("./src") 。两者的区别:

path.resolve(__dirname, 'src')path.resolve("./src") 都是用于生成绝对路径的,但它们的基础路径不同。

  1. path.resolve(__dirname, 'src')的基础路径是 当前模块文件所在的(__dirname所在的目录)绝对路径:

    例如,如果当前模块的路径是 /home/user/project,那么path.resolve(__dirname, 'src') 将会返回 /home/user/project/src;如果当前模块的路径是 /home/user,仍会返回回/home/user/project/src

  • __dirname 是 Node.js 中的一个全局变量,表示当前模块的目录路径。
  • 'src' 是相对于当前模块目录的路径。
  1. path.resolve("./src")的基础路径是 相对于当前工作目录(脚本执行的目录)的路径:
  • "./src" 是相对于当前工作目录的路径。
  • 例如,如果当前工作目录是 /home/user/project,那么path.resolve("./src") 将会返回 /home/user/project/src;如果当前模块的路径是 /home/user,则会返回回/home/user/src

所以,主要区别在于基础路径不同。使用 __dirname 通常更安全,因为它是当前模块的目录,不受工作目录的影响。而使用相对路径可能受到工作目录的影响,因为工作目录可能会在不同的执行环境中变化。

相关推荐
一只小阿乐3 小时前
react 封装弹框组件 传递数据
前端·javascript·react.js
533_4 小时前
[element-plus] el-tree 动态增加节点,删除节点
前端·javascript·vue.js
禁止摆烂_才浅4 小时前
前端开发小技巧-【JavaScript】- 获取元素距离 document 顶部的距离
前端·javascript·react.js
wshzd4 小时前
LLM之Agent(二十九)|LangChain 1.0核心组件介绍
前端·javascript·langchain
程序猿_极客4 小时前
Vue 2脚手架从入门到实战核心知识点全解析(day6):从工程结构到高级通信(附代码讲解)
前端·javascript·vue.js·vue2学习笔记
q***71854 小时前
海康威视摄像头ISUP(原EHOME协议) 摄像头实时预览springboot 版本java实现,并可以在浏览器vue前端播放(附带源码)
java·前端·spring boot
一只小阿乐4 小时前
vue3 使用v-model开发弹窗组件
javascript·vue.js·elementui
web加加4 小时前
vue3 +vite项目页面防f12,防打开控制台
前端·javascript·vue.js
A尘埃5 小时前
大模型应用python+Java后端+Vue前端的整合
java·前端·python
遥遥晚风点点5 小时前
Spark导出数据文件到HDFS
前端·javascript·ajax