Vue項目配置@別名全過程
在實際項目中，我們通?？梢詫?src 目錄通過設(shè)置別名為 @ 目錄，這樣引入文件時候可以一目了然而且使用起來非常方便，可以提高我們的開發(fā)效率。
@ 代表的是 src 文件夾，這樣將來文件過多，找的時候也方便，而且也還有提示。
Webpack + JavaScript 項目配置 @ 別名
在項目新建 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"
]
}Vite + TypeScript 項目配置 @ 別名
編輯 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)容如下：
{
"compilerOptions": {
"baseUrl": ".",
// 用于設(shè)置解析非相對模塊名稱的基本目錄，相對模塊不會受到baseUrl的影響
"paths": {
// 用于設(shè)置模塊名到基于baseUrl的路徑映射
"@/*": [
"src/*"
]
}
}
}使用方法
重新運行一遍項目即可
import Home from '@/pages/Layout/index.vue'
可能出現(xiàn)的問題
使用 WebStorm + Vue 3 + TypeScript 開發(fā)項目時使用 @ 別名
可能會存在以下報錯：
Cannot find module ‘@/views/xxx.vue‘ or its corresponding type declarations
意思是說找不到對應(yīng)的模塊“@/views/xxx.vue”或其相應(yīng)的類型聲明，因為 TypeScript 只能解析 .ts 文件，無法解析 .vue 文件
解決方法
查找項目內(nèi)的 vite-env.d.ts 文件，一開始的時候 vite-env.d.ts 是空文件，我們可以在其中引入如下代碼：
declare module '*.vue' {
import { DefineComponent } from "vue"
const component: DefineComponent<{}, {}, any>
export default component
}加入上面的代碼后重新運行項目就不再報錯了。
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue 對象添加或刪除成員時無法實時更新的解決方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
本篇文章主要介紹了vue-resouce設(shè)置請求頭的三種方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
vue.js?自定義指令（拖拽、拖動、移動）?指令?v-drag詳解
這篇文章主要介紹了vue.js?自定義指令（拖拽、拖動、移動）?指令?v-drag,本文結(jié)合示例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-01-01
這篇文章主要為大家詳細介紹了如何利用Vue實現(xiàn)多點涂鴉效果，文中的示例代碼講解詳細，具有一定的學(xué)習(xí)價值，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-03-03
vue-cli是一個官方發(fā)布vue.js項目腳手架,使用vue-cli可以快速創(chuàng)建vue項目。本文介紹了vue-cli4.5.x快速搭建項目，感興趣的可以了解一下2021-05-05
vue中使用百度腦圖kityminder-core二次開發(fā)的實現(xiàn)
這篇文章主要介紹了vue中使用百度腦圖kityminder-core二次開發(fā)的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
詳解vue結(jié)合el-table實現(xiàn)表格小計總計需求(summary-method)
這篇文章主要介紹了vue結(jié)合el-table實現(xiàn)表格小計總計需求(summary-method),本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-01-01
在實際項目開發(fā)中,幾乎每個組件中都會用到?axios?發(fā)起數(shù)據(jù)請求,下面這篇文章主要給大家總結(jié)介紹了關(guān)于Vue3全局配置axios的兩種方式,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2023-01-01
由于公司網(wǎng)絡(luò)登element-ui官方文檔很慢,想把他載下來離線文檔本地跑,下面這篇文章主要給大家介紹了關(guān)于本地部署element-plus文檔的簡單步驟,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-05-05
這篇文章主要介紹了使用vue如何構(gòu)建一個自動建站項目，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02