VUE3路径别名

路径别名导致的问题

现象一

> vue3_ts@0.0.0 dev /mnt/f/vue3_ts
> vite

error when starting dev server:
Error: The following dependencies are imported but could not be resolved:bash
....

现象二

 [vite] Internal server error: Failed to resolve import "@/utils/auth" from "src/views/index.vue". Does the file exist?
  Plugin: vite:import-analysis

解决方法

修改 vite.config.ts

//  vite.config.ts
...
const { resolve } = require('path')   //   增加

export default defineConfig({
 ...
  //  增加
  resolve: {   
    alias: [
      {    // 与tsconfig.json的paths对应
        find: "@",
        replacement: resolve(__dirname, 'src')
      }
    ]
  },
   //  增加end
  ...
})

对应 tsconfig.json

//  tsconfig.json
{
  "compilerOptions": {
   ....
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
    ...
  },
  ...
}