vue3+vite+ts中的@的配置

前言

✨✨ 我们是天生勇敢的开发者，我们创造bug，传播bug，毫不留情地消灭bug，在这个过程中我们创造了很多bug以供娱乐。

错误场景

vue3 + vite + ts

问题分析

在vue3的项目开发中我遇到了这样一个问题
[vite] Internal server error: Failed to resolve import “@/views/lazyLoading.vue” from “src\router\index.js”. Does the file exist?
查阅资料后，得知是需要在vue中配置一个@符号的

解决方案

下载一个插件

npm install --save-dev @types/node
1

然后在vue项目中找到 vite.config.ts 文件进行配置

import { resolve } from 'path'     
 
const pathResolve = (dir: string): any => {  
  return resolve(__dirname, ".", dir)          
}
 
const alias: Record<string, string> = {
  '@': pathResolve("src")
}
 
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

后言

创作不易，要是本文章对广大读者有那么一点点帮助 不妨三连支持一下，您的鼓励就是博主创作的动力