Vue - 别名路径联想提示

在编写代码过程中,一旦 输入 @/ , VSCode 会立即 联想出 src 下的所有子目录和文件,统一文件路径访问不容易出错。

如何配置:

  1. 在项目的根目录 jsconfig.json 文件
  2. 添加 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))
    },
  },
})

这样在开发过程中在导入的时候,更加方便了。