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)文章

vue3組合式API中setup()概念和reactive()函數(shù)的用法
這篇文章主要介紹了vue3組合式API中setup()概念和reactive()函數(shù)的用法,接下來的事件，我將帶著你從淺到深分析為什么我們需要學(xué)習(xí)組合式API以及我們的setup()函數(shù)作為入口函數(shù)的一個基本的使用方式，需要的朋友可以參考下
2023-03-03
vue技術(shù)分享之你可能不知道的7個秘密
這篇文章主要介紹了vue技術(shù)分享-你可能不知道的7個秘密,需要的朋友可以參考下
2018-04-04
Vue自定義表單內(nèi)容檢查rules實例
這篇文章主要介紹了Vue自定義表單內(nèi)容檢查rules實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-10-10
Vue.js實現(xiàn)圖片的隨意拖動方法
下面小編就為大家分享一篇Vue.js實現(xiàn)圖片的隨意拖動方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-03-03
如何查看vue項目的node版本
文章總結(jié)：查看Vue項目中使用的Node版本,特別是當(dāng)項目使用Yarn和TypeScript時,可以通過查看yarn.lock文件中的@types/node@version來確定版本
2025-01-01
關(guān)于新建的vue3項目一直提示代碼格式警告的問題
這篇文章主要介紹了關(guān)于新建的vue3項目一直提示代碼格式警告的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-10-10
vue el-table 動態(tài)添加行與刪除行的實現(xiàn)
這篇文章主要介紹了vue el-table 動態(tài)添加行與刪除行的實現(xiàn)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-07-07
Vue 讀取HTMLCollection列表的length為0問題
這篇文章主要介紹了Vue 讀取HTMLCollection列表的length為0問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-06-06
vue ssr+koa2構(gòu)建服務(wù)端渲染的示例代碼
這篇文章主要介紹了vue ssr+koa2構(gòu)建服務(wù)端渲染的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-03-03
element-plus報錯ResizeObserver?loop?limit?exceeded解決辦法
這篇文章主要給大家介紹了關(guān)于element-plus報錯ResizeObserver?loop?limit?exceeded的解決辦法,文中通過代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考借鑒價值,需要的朋友可以參考下
2023-07-07