如何在vue3中使用 @ 来引入文件
- 我这里用到的是
vue: ^3.2.45
和vite: ^4.1.0
版本,所以在配置之前需要先安装一个可以使用resolve
的插件,有了此插件就可以通过import
来引入path
:
npm i -D @types/node
- 接下来是配置
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('')
},
}
})
- 然后是配置
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" }]
}
- 最后在页面上就可以直接使用
@
来引入.vue
组件了:
<script setup lang="ts">
import HelloWorld from '@/components/HelloWorld.vue'
</script>
<template>
<HelloWorld></HelloWorld>
</template>
<style></style>
以上内容仅供参考,如果有写的不对的地方,请在下方留言,一起在前端开发的道路上共同学习进步。。。