【vue3】vue3 路由配置文件路径@开头报错找不到文件

目录

• • 方法一
  • 方法二
  • 安装好后vite.config.ts配置
  • 结束：完成

方法一

将@换成 …/就正常了

方法二

安装path插件

npm install --save-dev @types/node

安装好后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     // ****************** 路径配置新增
  }           // ****************** 路径配置新增
})

结束：完成

• 随便用@表示路径了不会报错

import home from '@/views/home/index.vue'
import mine from '@/views/mine/index.vue'
import { createRouter,createMemoryHistory,createWebHashHistory,createWebHistory } from 'vue-router'


const routes = [
  {
    path:'/home',
    name:'home',
    component:home,
    meta:{
      title:'',
      keepAlive:false
    }
  },{
    path:'/mine',
    name:'mine',
    component:mine,
    meta:{
      title:'',
      keepAlive:false
    }
  },
]

const router =  createRouter({
  history:createWebHistory(),
  routes
})
export default router