vite vue3 路由配置@找不到文件

问题描述

今天第一次使用vite单间vue3的一个typescript的项目。在配置路由的时候，遇到了一个问题，就是添加路由界面的时候，找不到指定的文件，提示错误，如下图:

[vite] Internal server error: Failed to resolve import "@/views/login/index.的相关错误。

11:13:20 ├F10: PM┤ [vite] Internal server error: Failed to resolve import "@/views/login/index.vue" from "src\router\index.ts". Does the file exist?
  Plugin: vite:import-analysis
  File: G:/vue/vue3/demo01/vitedemo1/src/router/index.ts
  1  |  import { createRouter, createWebHashHistory } from "vue-router";
  2  |  import login from "@/views/login/index.vue";
     |                     ^
  3  |  const routes = [
  4  |    {
      at formatError (G:\vue\vue3\demo01\vitedemo1\node_modules\vite\dist\node\chunks\dep-971d9e33.js:38082:46)
      at TransformContext.error (G:\vue\vue3\demo01\vitedemo1\node_modules\vite\dist\node\chunks\dep-971d9e33.js:38078:19)
      at normalizeUrl (G:\vue\vue3\demo01\vitedemo1\node_modules\vite\dist\node\chunks\dep-971d9e33.js:69803:26)
      at processTicksAndRejections (internal/process/task_queues.js:97:5)
      at async TransformContext.transform (G:\vue\vue3\demo01\vitedemo1\node_modules\vite\dist\node\chunks\dep-971d9e33.js:69943:57)
      at async Object.transform (G:\vue\vue3\demo01\vitedemo1\node_modules\vite\dist\node\chunks\dep-971d9e33.js:38318:30)
      at async doTransform (G:\vue\vue3\demo01\vitedemo1\node_modules\vite\dist\node\chunks\dep-971d9e33.js:53014:29)

但是，如果将@换成 ../就正常了，如下图:

对于第一次使用vite的我来说一脸懵逼，在晚上找了很久，终于找到一个完整的解决方案，

解决办法

1、需要先安装一个path的插件

npm install --save-dev @types/node

2、找到vite.config.ts这个文件(在根目录下，进行如下配置) 

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// *********************************** 路径配置新增 start  
import { resolve } from 'path'     

const pathResolve = (dir: string): any => {  
  return resolve(__dirname, ".", dir)          
}

const alias: Record<string, string> = {
  '@': pathResolve("src")
}

// ********************************** 路径配置新增  end 
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {  // ****************** 路径配置新增
    alias     // ****************** 路径配置新增
  }           // ****************** 路径配置新增
})

3、配置完之后，重新启动项目就可以了