解決vue-cli項(xiàng)目sourcemap因?yàn)槲募孛麑?dǎo)致的文件定位映射錯誤問題
更新時間：2024年06月06日 14:46:21 作者：jaqi.l
這篇文章主要介紹了解決vue-cli項(xiàng)目sourcemap因?yàn)槲募孛麑?dǎo)致的文件定位映射錯誤問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
vue-cli項(xiàng)目sourcemap文件重名導(dǎo)致的文件定位映射錯誤
webpack會將所有源碼放在同一個目錄，項(xiàng)目中不同目錄下的index文件重名被覆蓋，導(dǎo)致調(diào)試時所在行與文件映射關(guān)系錯亂
解決方案
使用module-eval-source-map
- vue.config.js文件：
module.exports = {
configureWebpack: {
// 處理 同名文件導(dǎo)致的SourceMap定位錯誤問題
devtool: process.env.NODE_ENV === 'production' ? '' : 'module-eval-source-map',
}
}cheap-module-eval-source-map：不生成列映射，只是映射行數(shù) 因此不能解決上述問題
vue source-map設(shè)置，@符號使用
Source Map
Source Map 是一個信息文件，里面存儲著報錯的位置信息，只要有了它，出錯的時候，可以直接定位到開發(fā)時的原始代碼，而不是壓縮轉(zhuǎn)換后的代碼。
極大的方便我們測試，需要在webpack.config.js里面設(shè)置。
- 開發(fā)模式
module.exports = {
//在開發(fā)調(diào)試階段，建議把devtool的值設(shè)置為eval-source-map
devtool:'eval-source-map',
}- 實(shí)際發(fā)布
module.exports = {
//在實(shí)際發(fā)布的時候，建議將devtool的值設(shè)置為nosources-source-map或者關(guān)閉sourceMAP
devtool:'nosources-source-map',
}@符號查找文件
需要在webpack.config.js里面設(shè)置。
module.exports = {
resolve: {
alias: {
//@符號表示src為查找文件的第一級目錄
'@': path.join(__dirname, './src/')
}
}
}總結(jié)
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue中this.$emit和this.$on的使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
最近做項(xiàng)目需要實(shí)現(xiàn)世界地圖,本文主要介紹了Vue3+echarts繪制世界地圖的示例代碼,具有一定的參考價值,感謝的可以了解一下2024-03-03
這篇文章主要介紹了vue中使用mockjs配置和使用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue3雙向綁定實(shí)現(xiàn)原理解讀,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
本篇文章主要介紹了Vue路由跳轉(zhuǎn)問題記錄詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
這篇文章主要介紹了Vue2的路由和異步請求方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
自帶氣泡提示的vue校驗(yàn)插件（vue-verify-pop）
這篇文章主要為大家詳細(xì)介紹了自帶氣泡提示的vue校驗(yàn)插件，vue-verify-pop的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
vue項(xiàng)目中使用AvueJs的詳細(xì)教程
Avue.js是基于現(xiàn)有的element-ui庫進(jìn)行的二次封裝，簡化一些繁瑣的操作，核心理念為數(shù)據(jù)驅(qū)動視圖,主要的組件庫針對table表格和form表單場景，這篇文章給大家介紹了vue項(xiàng)目中使用AvueJs的相關(guān)知識，感興趣的朋友跟隨小編一起看看吧2022-10-10
vue中如何實(shí)現(xiàn)錨點(diǎn)定位平滑滾動
這篇文章主要介紹了vue中如何實(shí)現(xiàn)錨點(diǎn)定位平滑滾動方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
Vux+Axios攔截器增加loading的問題及實(shí)現(xiàn)方法
這篇文章主要介紹了Vux+Axios攔截器增加loading的問題及實(shí)現(xiàn)方法，文中通過實(shí)例代碼介紹了vue中使用axios的相關(guān)知識,需要的朋友可以參考下2018-11-11