vue為自定義路徑設置別名的方法

Posted on by

Vue中如何配置自定義路徑別名

在我們日常開發中，常常會導入一些模塊或者組件，如果采用相對路徑的方式：

import uEditor from "../../../../../components/tools";

會顯得臃腫，多餘，如果引用稍有差錯就會出現-404的報錯，不優雅，還會經常出現404錯誤，如果文件有變，還需要一個一個文件找到改路徑進行重新修改，十分麻煩，vue cli3以上的版本在node_modules中提供瞭文件別名功能。但是還是建議沒有特別要求少改一點node_modules的代碼。

創建vue.config.js,寫入配置代碼

module.exports = {
    configureWebpack: {
        resolve: {
            alias: { //配置別名,修改後需要重新編譯才能生效
                'assets': '@/assets',
                'common': '@/common',
                'components': '@/components',
                'network': '@/network',
                'views': '@/views',
            }
        }
    }
}

如下圖：

註意：如果在HTML路徑中使用別名，需要在引用前面加上”~”前綴。

其他文件中引用：

以上所述是小編給大傢介紹的vue為自定義路徑設置別名的方法，希望對大傢有所幫助。在此也非常感謝大傢對WalkonNet網站的支持！

推薦閱讀：