vite中如何使用@?配置路徑別名
更新時間：2022年12月05日 09:46:35 作者：瀟似風(fēng)
這篇文章主要介紹了vite中如何使用@?配置路徑別名，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
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';
vite配置別名@以及別名輸入提示
配置別名
// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'
// https://vitejs.dev/config/
export default defineConfig({
? plugins: [react()],
? resolve: {
? ? alias: [
? ? ? {
? ? ? ? find: '@',
? ? ? ? replacement: path.resolve(__dirname, 'src')
? ? ? },
? ? ? ...
? ? ]
? }
})如果 path 報錯，可以安裝 npm i -D @type/node，若還報錯則可能是vite版本問題 改成 import * as path from 'path'
別名提示
"compilerOptions": {
?? ?...
?? ?"baseUrl": "./",
? ? "paths": {
? ? ?? ?"@/*": ["src/*"]
? ? }
}以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue element自定義表單驗證請求后端接口驗證，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
vue前端重構(gòu)computed及watch組件通信等實(shí)用技巧整理
這篇文章主要為大家介紹了vue前端重構(gòu)computed及watch組件通信等實(shí)用技巧整理，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-05-05
vue?elementUI之this.$confirm的使用方式
這篇文章主要介紹了vue?elementUI之this.$confirm的使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-08-08
從接觸Vue我們就知道 v-model是實(shí)現(xiàn)數(shù)據(jù)雙向綁定的那他能實(shí)現(xiàn)綁定的原理到底是啥？最常見的語法糖 v-model，今天通過案例給大家詳細(xì)介紹下，需要的朋友參考下吧2021-09-09
這篇文章主要介紹了在vue中使用?jquery?的兩種方法小結(jié)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
vue中element-ui表格縮略圖懸浮放大功能的實(shí)例代碼
element-ui界面非常簡潔和美觀，提供的組件可以滿足絕大多數(shù)的應(yīng)用場景，當(dāng)表格中顯示了圖片的縮略圖時，想要鼠標(biāo)浮動在縮略圖上時放大圖片的效果，該如何實(shí)現(xiàn)呢？下面小編通過實(shí)例代碼給大家介紹vue中element-ui表格縮略圖懸浮放大功能，一起看看吧2018-06-06
這篇文章主要介紹了解決Vue的組件屬性this不存在問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-01-01
vue2中使用SSE(服務(wù)器發(fā)送事件)原因分析
SSE是圍繞只讀Comet交互推出的API或者模式,SSE 支持短輪詢、長輪詢和HTTP 流,而且能在斷開連接時自動確定何時重新連接,本文重點(diǎn)給大家介紹2023-10-10
詳解Vue 數(shù)據(jù)更新了但頁面沒有更新的 7 種情況匯總及延伸總結(jié)
這篇文章主要介紹了詳解Vue 數(shù)據(jù)更新了但頁面沒有更新的 7 種情況匯總及延伸總結(jié)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
vue?使用mescroll.js框架實(shí)現(xiàn)下拉加載和上拉刷新功能
這篇文章主要介紹了vue?使用mescroll.js框架?實(shí)現(xiàn)下拉加載和上拉刷新功能,本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-07-07