vue3+vite 配置使用 @ 引入文件

如何在vue3中使用 @ 来引入文件

1. 我这里用到的是 vue: ^3.2.45 和 vite: ^4.1.0 版本，所以在配置之前需要先安装一个可以使用 resolve 的插件，有了此插件就可以通过 import 来引入 path ：

npm i -D @types/node

2. 接下来是配置 vite.config.ts：

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

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

  resolve: {
    // 设置路径别名
    alias: {
      '@': resolve(__dirname, './src'),
      '*': resolve('')
    },
  }
})

3. 然后是配置 tsconfig.json，主要是这两行 "baseUrl": ".", "paths": {"@/*": ["src/*"]}:

{
  "compilerOptions": {
    "allowJs": true,
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "strict": true,
    "jsx": "preserve",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": ["ESNext", "DOM"],
    "skipLibCheck": true,
    "noEmit": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

4. 最后在页面上就可以直接使用 @ 来引入 .vue 组件了：

<script setup lang="ts">
import HelloWorld from '@/components/HelloWorld.vue'
</script>

<template>
  <HelloWorld></HelloWorld>
</template>

<style></style>

以上内容仅供参考，如果有写的不对的地方，请在下方留言，一起在前端开发的道路上共同学习进步。。。