Vue3配置@别名来统一资源相对路径

Vue3配置@别名来统一资源相对路径

编程文章jaq1232025-10-08 18:32:4511A+A-

在组件引入的时候,为了统一import的路径到指定的相对目录,避免在引入不同的组件的时候通过“.”,".."来切换路径,可以通过配置别名@来指定基地址,这样提高代码的可读性,比如在目录多层级的时候,就会出现“
../../../components/button.ve",这样层级查找的时候,我们需要数”../"来确定引用的目录。(@是其中一个通用的字符,换成其他字符也是可以的,比如下面的例子使用"#"来实现)

说明:下面的案例是通过vite和vs code来实现的

添加一下path的依赖,path是nodejs下的一个基础模块,那么直接引入node

yarn add --dev @types/node

vite.config.ts文件中添加resolve的配置一下别名,这里别名用“#”来表示,这里的配置是告知vite怎么打包,如果只是编译执行,这一步就已经完成了。

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

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

接下来为了让IDE有智能提示,在tsconfig.json(如果用的是js,这个文件名是:jsconfig.json)中配置compilerOptions节点,指定baseUrl基地址,然后通过paths配置项#下的所有目录是基于当前目录下的src目录开始,作为统一的起始路径。

{
  ……忽略很多其他的配置
  "compilerOptions": {
    "baseUrl": ".",
    "paths":{
      "#/*":["./src/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

下面来看一下使用的效果


可以看到,当输入“#”的时候IDE会自动提示选择路径

其中TestPath的导入用了“#”,同时也是支持原来通过“.”的方式来做路径偏移的。

实际运行起来也是ok的。

希望对您有帮助,欢迎讨论+关注。

点击这里复制本文地址 以上内容由jaq123整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

苍茫编程网 © All Rights Reserved.  蜀ICP备2024111239号-21