Vue項(xiàng)目中如何配置src文件下的@別名

更新時間：2024年03月01日 16:31:56 作者：前端進(jìn)階中

這篇文章主要介紹了Vue項(xiàng)目中如何配置src文件下的@別名問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

Vue項(xiàng)目配置src文件下@別名

方法一：

在實(shí)際項(xiàng)目中，我們通常可以將src目錄設(shè)置為@目錄，這樣引入文件時候可以一目了然而且使用起來非常方便，可以提高我們的開發(fā)效率。

[@代表的是src文件夾,這樣將來文件過多，找的時候也方便，而且也還有提示]

本文介紹如何在實(shí)際項(xiàng)目中使用@作為src目錄的別名：

1.Webpack+JavaScript項(xiàng)目

在項(xiàng)目新建vue.config.js,編輯vue.config.js內(nèi)容如下：

const path = require('path')
 
function resolve(dir) {
  return path.join(__dirname, dir)
}
 
module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        '@': resolve('src')
      }
    }
  }
}

新建jsconfig.json，內(nèi)容如下:(@在node_moules和dist文件中不能使用)

方法一：

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "baseUrl": "./",
    "moduleResolution": "node",
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  }
}

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": [
        "src/*"
      ]
    }
  },
  "exclude": [
    "node_modules",
    "dist"
  ]
}

2.Vite+TypeScript項(xiàng)目

編輯vite.config.ts內(nèi)容如下：

import vue from '@vitejs/plugin-vue'
import { defineConfig } from 'vite'
import { resolve } from 'path'
 
export default defineConfig({
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src') // 路徑別名
    },
    extensions: ['.js', '.json', '.ts', '.vue'] // 使用路徑別名時想要省略的后綴名，可以自己 增減
  }
})

編輯tsconfig.json，內(nèi)容如下：

Vue src路徑別名@的配置

在開發(fā)項(xiàng)目的時候文件與文件關(guān)系可能很復(fù)雜，因此我們需要給 src 文件夾配置一個別名。

// vite.config.tsimport {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
export default defineConfig({
    plugins: [vue()],
    resolve: {
        alias: {
            "@": path.resolve(__dirname, "./src") // 相對路徑別名配置，使用 @ 代替 src
        }
    }
})

// ts 編譯配置
// tsconfig.json

{
  "compilerOptions": {
    "baseUrl": "./", // 解析非相對模塊的基地址，默認(rèn)是當(dāng)前目錄
    "paths": { //路徑映射，相對于baseUrl
      "@/*": ["src/*"] 
    }
  }
}

或者：

// vite.config.js

import {fileURLToPath, URL} from 'node:url'
import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
    plugins: [vue()],
    resolve: {
        alias: {
            '@': fileURLToPath(new URL('./src', import.meta.url))
        }
    }
})

// ts 編譯配置
// tsconfig.json

{
  "compilerOptions": {
    "baseUrl": "./", // 解析非相對模塊的基地址，默認(rèn)是當(dāng)前目錄
    "paths": { //路徑映射，相對于baseUrl
      "@/*": ["src/*"] 
    }
  }
}