场景:

使用 npm create vite@latest 命令创建了vue3+ts的项目,想要在项目内引入文件时使用@来作为src的别名。如果直接使用@,会报错,让我们一起引入相关依赖并配置一下吧。

实现:

步骤一:引入@types/node

@types/node内部包含了对Node.js 核心模块及常用第三方库的类型信息描述,增加了TypeScript 对 Node.js 环境的支持

npm install @types/node -D

 步骤二:在tsconfig.json文件中的compilerOptions对象内添加配置项

// 对baseUrl进行配置
"baseUrl": "./",
// 对paths进行映射配置
"paths": {
    "@/*": ["src/*"]
}

步骤三:在vite.config.ts文件中添加配置项

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 从Node.js的内置path模块中导入resolve方法
// path模块一般用于文件路径等
import { resolve } from 'path'

export default defineConfig({
  plugins: [vue()],
  // 使用resolve方法来构建别名路径
  resolve:{   
    // 配置@为src的别名
    alias:[   
      {
        find:'@',
        replacement:resolve(__dirname,'src') 
      }
    ]
  }
})

此时,已经可以使用@来作为src的别名引入文件了,可喜可贺!

GitHub 加速计划 / vu / vue
82
16
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:4 个月前 )
9e887079 [skip ci] 2 个月前
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 6 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐