Failed to resolve import “@/views/index.vue“ from “src\router\index.ts“ vue3 路由配置@找不到文件-Toy模板网

这篇具有很好参考价值的文章主要介绍了Failed to resolve import “@/views/index.vue“ from “src\router\index.ts“ vue3 路由配置@找不到文件。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

在main.ts中引入router

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router/index.js'
// 导入Unocss
import 'uno.css'

createApp(App).use(router).mount('#app')

报错提示找不到路径

[vite] Internal server error: Failed to resolve import "@/views/LoginView.vue" from "src\router\index.ts". Does the file exist?
  Plugin: vite:import-analysis
  File: D:/project/vue3-shopping/src/router/index.ts
  4  |      path: "/login",
  5  |      name: "Login",
  6  |      component: () => import("@/views/LoginView.vue"),

解决：

修改vite.config.ts配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 引入Unocss
import Unocss from 'unocss/vite';
import { presetUno, presetAttributify, presetIcons } from "unocss"
import path from 'path' // 需安装此模块

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(),
    Unocss({ // 使用Unocss
      presets: [
        presetUno(),
        presetAttributify(),
        presetIcons()],
    })],

  resolve: {
    alias: {  // 这里就是需要配置resolve里的别名
      "@": path.join(__dirname, "./src"), // path记得引入
      // 'vue': 'vue/dist/vue.esm-bundler.js' // 定义vue的别名，如果使用其他的插件，可能会用到别名
    },
  }

})

安装 path模块

三种方式，我用的第一种。

npm install --save-dev @types/node

cnpm install --save-dev @types/node

yarn add @types/node -D

配置完成以后运行

 npm run dev

解决，撒花！文章来源地址https://www.toymoban.com/news/detail-737145.html

到了这里，关于Failed to resolve import “@/views/index.vue“ from “src\router\index.ts“ vue3 路由配置@找不到文件的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！