Failed to resolve import “@/views/index.vue” vue3 routing configuration@file not found

Use to  vite build  projects vue3 one by one .typescript

When configuring the route adding route interface, an error is reported: the specified file cannot be found, and the error message is as shown in the figure below:

../It is normal to replace @  , as follows:

Solutions:

Install the Path plugin:

npm install --save-dev @types/node

Enter the configuration file in the root directory  vite.config.ts:

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

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

Modify  vite.config.ts the file:

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

restart project