在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';

總結(jié)

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vuejs第七篇之Vuejs過渡動畫案例全面解析
這篇文章主要介紹了Vuejs第七篇之Vuejs過渡動畫案例全面解析的相關(guān)資料,需要的朋友可以參考下
2016-09-09
vue3的二維碼組件vue3-next-qrcode
這篇文章主要為大家介紹了vue3的二維碼組件vue3-next-qrcode示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-09-09
vue內(nèi)置動態(tài)組件component使用示例小結(jié)
component是vue內(nèi)置組件,主要作用為動態(tài)渲染組件,這篇文章主要介紹了vue內(nèi)置動態(tài)組件component使用示例小結(jié),需要的朋友可以參考下
2024-03-03
vue之ele多級聯(lián)組件的使用方法詳解
這篇文章為大家詳細主要介紹了vue之ele多級聯(lián)組件的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-07-07
在Vuex中Mutations修改狀態(tài)操作
這篇文章主要介紹了在Vuex中Mutations修改狀態(tài)操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-07-07
Vue實現(xiàn)生成本地Json文件功能方式
這篇文章主要介紹了Vue實現(xiàn)生成本地Json文件功能方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-07-07
Vue頭像處理方案小結(jié)
這篇文章主要介紹了Vue頭像處理方案，實現(xiàn)思路主要是通過獲取后臺返回頭像url，判斷圖片寬度，高度。具體實例代碼大家參考下本文
2018-07-07
vue前后端端口不一致的問題解決
本文主要介紹了vue前后端端口不一致的問題解決,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-10-10
vue百度地圖通過地址名稱獲取地址的經(jīng)緯度gps問題(具體步驟)
在Vue項目中，可以通過使用百度地圖JavaScript?API來實現(xiàn)根據(jù)地址名稱獲取經(jīng)緯度GPS的功能，本文分步驟給大家詳細講解vue百度地圖獲取經(jīng)緯度的實例，感興趣的朋友一起看看吧
2023-05-05
vue實現(xiàn)數(shù)字動態(tài)翻牌器
這篇文章主要為大家詳細介紹了vue實現(xiàn)數(shù)字動態(tài)翻牌器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-04-04