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路由跳轉(zhuǎn)攜帶參數(shù)的方式總結(jié)
我們知道在vue中每個頁面都需要在路由中聲明,下面這篇文章主要給大家介紹了關(guān)于vue路由跳轉(zhuǎn)攜帶參數(shù)的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10
vue從一個頁面跳轉(zhuǎn)到另一個頁面并攜帶參數(shù)的解決方法
這篇文章主要介紹了vue從一個頁面跳轉(zhuǎn)到另一個頁面并攜帶參數(shù)的解決方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
這篇文章主要介紹了vue中移動端調(diào)取本地的復(fù)制的文本方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
在 Vue.js 中,組件之間的數(shù)據(jù)傳遞是一個常見的需求,Vue 提供了多種方法來實現(xiàn)這一目標(biāo),包括 props、全局事件總線、消息的訂閱與發(fā)布等,下面我們就來學(xué)習(xí)一下這些方法的具體實現(xiàn)吧2023-12-12
基于vue-element組件實現(xiàn)音樂播放器功能
這篇文章主要介紹了基于vue-element組件實現(xiàn)音樂播放器功能，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2018-05-05
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)信息管理系統(tǒng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05
這篇文章主要給大家介紹了關(guān)于vue3獲取、設(shè)置元素高度的相關(guān)資料,小編通過實際案例向大家展示操作過程,操作方法簡單易懂,需要的朋友可以參考下2024-08-08
vue2.0 watch里面的 deep和immediate用法說明
這篇文章主要介紹了vue2.0 watch里面的 deep和immediate用法說明，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
Nuxt3嵌套路由,報錯Failed?to?resolve?component:?NuxtChild的解決
這篇文章主要介紹了Nuxt3嵌套路由,報錯Failed?to?resolve?component:?NuxtChild的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要介紹了vue 路由嵌套高亮問題的解決方法，主路由通過v-for循環(huán)出來，次路由通過url拼接的方式導(dǎo)航到子路由頁面，具體實現(xiàn)代碼大家參考下本文2018-05-05