在vite項(xiàng)目中使用@進(jìn)行文件的引入方式
更新時間：2024年03月06日 10:48:27 作者：沒有頭發(fā)的戰(zhàn)斗暴龍獸
這篇文章主要介紹了在vite項(xiàng)目中使用@進(jìn)行文件的引入方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
vite項(xiàng)目中使用@進(jìn)行文件的引入
1.在vite.config.js中先引入path模塊：
import path from 'path'
2.在vite.config.js寫入如下配置：
resolve: {
alias: {
'@': path.resolve(__dirname, './src') // 為./src配置別名
}
}注意：
在vite項(xiàng)目中只有.js文件可以省略后綴， .vue文件不能省略
3.在項(xiàng)目根目錄下創(chuàng)建jsconfig.json文件，并做如下配置：
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@/*": ["src/*"] // 將項(xiàng)目根目錄配置別名為@
},
"allowSyntheticDefaultImports": true
},
"exclude": ["node_modules", "dist"]
}最后：
在vite.config.js中進(jìn)行的配置是為了運(yùn)行時不會進(jìn)行報(bào)錯，而在jsconfig.json中進(jìn)行配置是為了能夠有代碼提示
vite中使用@，配置路徑別名
報(bào)錯
Cannot find module 'XXXXXX ’ or its corresponding type declarations
vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
const path = require('path');
export default defineConfig({
plugins: [vue()],
define: {
'process.env': {},
},
resolve: {
// 配置路徑別名
alias: {
'@': path.resolve(__dirname, './src'),
},
},
});
tsconfig.json
配置baseUrl，paths
{
"compilerOptions": {
"target": "esnext",
"useDefineForClassFields": true,
"module": "esnext",
"moduleResolution": "node",
"strict": true,
"jsx": "preserve",
"sourceMap": true,
"resolveJsonModule": true,
"esModuleInterop": true,
"lib": ["esnext", "dom"],
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
}
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}
在文件中使用
import services from '@/services/index';
總結(jié)
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
如何構(gòu)建 vue-ssr 項(xiàng)目的方法步驟
這篇文章主要介紹了如何構(gòu)建 vue-ssr 項(xiàng)目的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
這篇文章主要介紹了vue列表自動滾動實(shí)例代碼,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了Vue 指令實(shí)現(xiàn)拖拽功能,實(shí)現(xiàn)原理很簡單，文中通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-10-10
vue實(shí)現(xiàn)的網(wǎng)易云音樂在線播放和下載功能案例
這篇文章主要介紹了vue實(shí)現(xiàn)的網(wǎng)易云音樂在線播放和下載功能,結(jié)合具體實(shí)例形式分析了網(wǎng)易云音樂相關(guān)接口調(diào)用與操作技巧,需要的朋友可以參考下2019-02-02
Vue?elementUI表單嵌套表格并對每行進(jìn)行校驗(yàn)詳解
element-ui中有詳細(xì)的各種表格及表格方法,下面這篇文章主要給大家介紹了關(guān)于Vue?elementUI表單嵌套表格并對每行進(jìn)行校驗(yàn)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-01-01
vue中展示、讀取.md?文件的方法(批量引入、自定義代碼塊高亮樣式)
這篇文章主要介紹了vue中展示、讀取.md?文件的方法(批量引入、自定義代碼塊高亮樣式),本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-05-05
vue.js實(shí)現(xiàn)單選框、復(fù)選框和下拉框示例
本篇文章主要介紹了vue.js實(shí)現(xiàn)單選框、復(fù)選框和下拉框示例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)多級菜單效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
vue中echarts點(diǎn)擊事件點(diǎn)擊一次多次觸發(fā)問題
這篇文章主要介紹了vue中echarts點(diǎn)擊事件點(diǎn)擊一次多次觸發(fā)問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
下面小編就為大家?guī)硪黄赩ue過渡狀態(tài)實(shí)例講解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09