一般做法
在VUE項(xiàng)目中企垦，如果文件過多且存在較多引用關(guān)系级野，常規(guī)情況./或../的路徑法雖然能達(dá)成目的，但容易犯錯(cuò)匪凡。(當(dāng)然也很low)
優(yōu)雅做法
1. 在VUE的webpack.base.conf.js中厉熟，已默認(rèn)為項(xiàng)目配置了@代號(hào)绝编，該代號(hào)將指向到項(xiàng)目的src文件夾职烧。
// 為顯示方便倚搬，module.exports的部分屬性未顯示
module.exports = {
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'), // 這句是重點(diǎn)
}
}
}
2. @強(qiáng)制匹配SRC路徑，形成統(tǒng)一的入口并逐步下沉路徑后脱盲，可避免路徑失誤邑滨，在任意文件內(nèi)都能得到統(tǒng)一的入口。
3. 使用舉例：引用 項(xiàng)目名稱/src/components/common/Head.vue 的常規(guī)方式可以改為以下寫法：
import MyHead from '@/components/common/Head'
優(yōu)雅做法-升級(jí)版
1. 在VUE默認(rèn)為項(xiàng)目配置了@代號(hào)钱反，那么也可以用類似的標(biāo)識(shí)指定統(tǒng)一的入口
// 為顯示方便掖看，module.exports的部分屬性未顯示
module.exports = {
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'api': resolve('src/api'), // 原目錄文件夾匣距，直接指定，畢竟能少一個(gè)文件夾地址看起來也是好的
'components': resolve('src/components'), // 同上
'pages': resolve('src/pages') // 自定義文件夾哎壳，也可以在這里配置路徑
}
}
}
2. 與上面的例子一樣：引用 項(xiàng)目名稱/src/components/common/Head.vue 的寫法可以更進(jìn)一步：
import MyHead from 'components/common/Head'
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
