vite vue3 路由配置@找不到文件问题描述

最新推荐文章于 2025-11-05 15:04:23 发布

原创最新推荐文章于 2025-11-05 15:04:23 发布 · 1.4k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

本文讲述了在使用Vite时，在配置路由时遇到的文件路径问题，通过安装path插件并正确设置alias，解决了找不到指定文件的错误，重启项目后即可正常运行。

问题描述

在vite.config.js文件中配置路由的时候，添加路由界面，找不到指定的文件，提示错误，如图所示：

但是换成 ./ 或者 ../ 就正常了，也没有报错问题

解决办法

1.安装一个path的插件

npm install --save-dev @types/node

2.在vite.config.js中配置

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

export default defineConfig({
    plugins: [vue()],
    resolve: {
        alias: {
            "@": resolve(__dirname, "./src")
        }
    }
})

3.重启项目就ok啦