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