今天给旧项目升级时,碰到 Vite2+js+vue2 的项目结构,但是 VSCode 打开后别名路径一直识别不了,打开 WebStorm 也一样识别不了,看来之前升级 vite2 时肯定是没配好,网上查了查,基本都试了一遍,每一个能真正识别出来的,于是自己倒腾出来了。

配置 vite.config.js

这个很简单,官方例子很多

resolve: {
    alias: [
        { find: '@', replacement: path.resolve(__dirname, './src') }
    ]
}

网上的列子 jsconfig.json

先来看看网上例子,都是这样的,但是在我这个项目上是怎样都不生效。

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

我例子的 jsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
    "target": "es2020",
    "module": "commonjs",
    "allowSyntheticDefaultImports": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

成功识别!