问题描述
今天第一次使用vite单间vue3的一个typescript的项目。在配置路由的时候，遇到了一个问题，就是添加路由界面的时候，找不到指定的文件，提示错误，如下图:
image
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)
但是，如果将@换成 ../就正常了，如下:
import login from '../views/login/index.vue'
对于第一次使用vite的我来说一脸懵逼，在晚上找了很久，终于找到一个完整的解决方案，
解决办法
需要先安装一个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 // ****************** 路径配置新增
} // ****************** 路径配置新增
})
