Vue CL3 配置路徑別名詳解
更新時間：2019年05月30日 11:43:49 作者：Dragon_慕碼人
這篇文章主要介紹了Vue CL3 配置路徑別名詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
Cli3工具中，配置路徑別名
最近用Vue Cli3腳手架搭建了Vue項目，發(fā)現(xiàn)沒有build目錄了，里面的webpack相關的也沒了，看了官方文檔后，查了資料后，發(fā)現(xiàn)都在vue.config.js里來配置了
配置路徑別名，方便引用，不用寫那么長
配置前:
import TodoList from '../../components/TodoList'
配置后(不用再關心文件層級關系):
import TodoList from 'components/TodoList'
在根目錄下添加'vue.config.js',
添加如下代碼：
const path = require('path')
function resolve(dir) {
return path.join(__dirname, dir)
}
module.exports = {
lintOnSave: true,
chainWebpack: config => {
config.resolve.alias
.set('@', resolve('src'))
.set('assets', resolve('src/assets'))
.set('components', resolve('src/components'))
.set('layout', resolve('src/layout'))
}
}
使用:
import TodoList from 'components/TodoList'
注意事項
- vue.config.js文件創(chuàng)建完后，不需要什么操作，@vue/cli-service會自己識別，如果出現(xiàn)報錯等等，可以先嘗試重啟下IDE或者啟動下項目
- vue.config.js在vue項目創(chuàng)建后，默認是沒有的，是一個可選的文件
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
watch 函數(shù)是 Vue.js 提供的一個強大工具,用于響應數(shù)據(jù)變化并執(zhí)行相應的回調(diào),通過合理使用 watch 函數(shù),我們可以實現(xiàn)異步數(shù)據(jù)請求、表單驗證、動態(tài)樣式等多種功能,這篇文章主要介紹了Vue.js 的 watch函數(shù),需要的朋友可以參考下2024-08-08
vue路由導航守衛(wèi)和請求攔截以及基于node的token認證的方法
這篇文章主要介紹了vue路由導航守衛(wèi)和請求攔截以及基于node的token認證的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-04-04
解決vue-cli創(chuàng)建項目的loader問題
下面小編就為大家分享一篇解決vue-cli創(chuàng)建項目的loader問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看看吧2018-03-03
這篇文章主要為大家詳細介紹了vue.js實現(xiàn)只能輸入數(shù)字的輸入框，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
這篇文章主要介紹了vue如何自定義按鈕單選和多選問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
這篇文章主要介紹了element ui table 增加篩選的方法示例，詳細的介紹了如何添加規(guī)則內(nèi)容，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-11-11
這篇文章主要介紹了Vue精簡版風格指南的相關資料，包括組件名稱，指令及特征,需要的朋友可以參考下2018-01-01
這篇文章主要介紹了Vue動態(tài)路由緩存不相互影響的解決辦法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-02-02
Vue Object.defineProperty及ProxyVue實現(xiàn)雙向數(shù)據(jù)綁定
這篇文章主要介紹了Vue Object.defineProperty及ProxyVue實現(xiàn)雙向數(shù)據(jù)綁定,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-09-09
本文介紹了Vue keep-alive組件的使用及如何清除緩存,給大家分享清除緩存的幾種方法,結(jié)合實例代碼給大家講解的非常詳細,需要的朋友跟隨小編一起看看吧2023-10-10