在vite項目中使用@進行文件的引入方式
更新時間：2024年03月06日 10:48:27 作者：沒有頭發(fā)的戰(zhàn)斗暴龍獸
這篇文章主要介紹了在vite項目中使用@進行文件的引入方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
vite項目中使用@進行文件的引入
1.在vite.config.js中先引入path模塊：
import path from 'path'
2.在vite.config.js寫入如下配置：
resolve: {
alias: {
'@': path.resolve(__dirname, './src') // 為./src配置別名
}
}注意：
在vite項目中只有.js文件可以省略后綴， .vue文件不能省略
3.在項目根目錄下創(chuàng)建jsconfig.json文件，并做如下配置：
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@/*": ["src/*"] // 將項目根目錄配置別名為@
},
"allowSyntheticDefaultImports": true
},
"exclude": ["node_modules", "dist"]
}最后：
在vite.config.js中進行的配置是為了運行時不會進行報錯，而在jsconfig.json中進行配置是為了能夠有代碼提示
vite中使用@，配置路徑別名
報錯
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';
總結
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了Vuejs第七篇之Vuejs過渡動畫案例全面解析的相關資料,需要的朋友可以參考下2016-09-09
這篇文章主要為大家介紹了vue3的二維碼組件vue3-next-qrcode示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-09-09
component是vue內置組件,主要作用為動態(tài)渲染組件,這篇文章主要介紹了vue內置動態(tài)組件component使用示例小結,需要的朋友可以參考下2024-03-03
這篇文章為大家詳細主要介紹了vue之ele多級聯(lián)組件的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要介紹了在Vuex中Mutations修改狀態(tài)操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了Vue實現(xiàn)生成本地Json文件功能方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
這篇文章主要介紹了Vue頭像處理方案，實現(xiàn)思路主要是通過獲取后臺返回頭像url，判斷圖片寬度，高度。具體實例代碼大家參考下本文2018-07-07
本文主要介紹了vue前后端端口不一致的問題解決,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2023-10-10
vue百度地圖通過地址名稱獲取地址的經緯度gps問題(具體步驟)
在Vue項目中，可以通過使用百度地圖JavaScript?API來實現(xiàn)根據(jù)地址名稱獲取經緯度GPS的功能，本文分步驟給大家詳細講解vue百度地圖獲取經緯度的實例，感興趣的朋友一起看看吧2023-05-05
這篇文章主要為大家詳細介紹了vue實現(xiàn)數(shù)字動態(tài)翻牌器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04