在编写代码过程中,一旦 输入 @/ , VSCode 会立即 联想出 src 下的所有子目录和文件,统一文件路径访问不容易出错。
如何配置:
- 在项目的根目录下 jsconfig.json 文件
- 添加 json 格式的配置项,如下:
// jsconfig.json
{
"compilerOptions": {
"paths": {
// 这个配置只作为联想提示
"@/*": ["./src/*"]
}
},
"exclude": ["node_modules", "dist"]
}
// vite.config.js
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
// https://vite.dev/config/
export default defineConfig({
plugins: [
vue(),
vueDevTools(),
],
// 实际的路径转换 @ -> src
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
},
},
})
这样在开发过程中在导入的时候,更加方便了。