学习记录
vite+ts项目中配置自定义路径前缀
首先在 vite.config.ts 中配置 resolve import { defineConfig } from 'vite'; import path from "path"; // htt
2023-08-01 17:44:47
41

首先在 vite.config.ts 中配置 resolve

import { defineConfig } from 'vite';
import path from "path";

// https://vitejs.dev/config/
export default ({ mode }) => defineConfig({
  // ...
  resolve: {
    // 配置路径别名
    alias: {
      // ...
      '_WBX_': path.resolve(__dirname, './src/components/wbx-comp')
    }
  }
})

然后在 tsconfig.ts 中配置 paths

{
  "compilerOptions": {
    // ...
    "paths": {
      // ...
      "_WBX_*": ["src/components/wbx-comp/*"]
    }
  }
}

接下来你在项目中引入 src/components/wbx-comp 下面的组件就可以使用:

import WebxueDemo from "_WBX_/webxue-demo/index.vue";

当然,如果你指定的路径没在 src 下,需要检查你的 tsconfig.json 中的 include 字段是否包含你的文件名

{
  "compilerOptions": {
    // ...
    "baseUrl": "./",
    "paths":{
      "_WBX_/*":["package/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue","package"]
}