vue3、vite使用typescript配置@路径别名

若酿

已于 2024-08-23 11:03:26 修改

阅读量564

点赞数 11

文章标签： typescript javascript 前端

于 2024-08-22 19:58:07 首次发布

本文链接：https://blog.csdn.net/weixin_55695389/article/details/141436637

版权

第一步：下载@types/node

由于node不兼容typescript，所以为了防止报红，需要先下载@types/node

npm install @types/node

第二步：配置vite.config.ts

导入resolve并设置路径别名，vite.config.ts代码如下：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
//实现@等于./src绝对路径
import { resolve } from 'path'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: [{
      find: '@',
      replacement: resolve(__dirname, './src')
    }]
  }
})

第三步：配置tsconfig.json

在compilerOptions属性中配置@路径，没有compilerOptions属性就新建一个，完整代码如下：

{
  "files": [],
  "references": [
    {
      "path": "./tsconfig.app.json"
    },
    {
      "path": "./tsconfig.node.json"
    }
  ],
  "compilerOptions": {
    //配置@路径
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "src/*"
      ]
    }
  }
}

完成以上步骤以后，在项目中所有用到路径的地方都可以用@/来取代src/