Failed to resolve import “@/views/index.vue“ vue3 路由配置@找不到文件

最新推荐文章于 2025-02-18 10:53:36 发布

明哥.

最新推荐文章于 2025-02-18 10:53:36 发布

阅读量6.1k

点赞数 2

CC 4.0 BY-SA版权

文章标签： vue.js Vite

本文为明哥原创文章，未经本文博主允许不得转载，否则将追究法律责任

本文链接：https://blog.csdn.net/weixin_40845165/article/details/129886412

在使用Vite搭建Vue3的typescript项目时，配置路由遇到文件找不到的错误。通过在vite.config.ts中引入path模块，设置路径别名，将@替换为相对路径../解决了问题。安装@types/node插件，并在resolve选项中添加alias配置，重启项目后错误消失。

使用 vite 搭建一个 vue3 的一个typescript的项目。

配置路由的添加路由界面的时候，报错：找不到指定的文件，提示错误如下图：

将@换成 ../就正常了，如下:

解决思路：

安装Path的插件：

npm install --save-dev @types/node

进入根目录下配置文件 vite.config.ts：

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

// https://vitejs.dev/config/
export default defineConfig({
	plugins: [vue()]
})

修改 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     // ****************** 路径配置新增
  }           // ****************** 路径配置新增
})

重启项目