解決vue-cli項目sourcemap因為文件重名導(dǎo)致的文件定位映射錯誤問題
更新時間：2024年06月06日 14:46:21 作者：jaqi.l
這篇文章主要介紹了解決vue-cli項目sourcemap因為文件重名導(dǎo)致的文件定位映射錯誤問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
vue-cli項目sourcemap文件重名導(dǎo)致的文件定位映射錯誤
webpack會將所有源碼放在同一個目錄，項目中不同目錄下的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',
}- 實際發(fā)布
module.exports = {
//在實際發(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)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了如何在vue中使用jointjs過程解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-05-05
這篇文章主要介紹了vue中$refs的用法及作用詳解,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2018-04-04
最近接了一個移動端的項目，實現(xiàn)微信掃碼功能，今天小編利用這個平臺給大家分享vue實現(xiàn)二維碼掃描功能的實現(xiàn)代碼，需要的朋友參考下吧2021-08-08
Vue中使用echarts實現(xiàn)繪制人體動態(tài)圖
這篇文章主要為大家詳細(xì)介紹了Vue中如何使用echarts實現(xiàn)繪制人體動態(tài)圖,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-03-03
這篇文章主要介紹了vue實現(xiàn)把接口單獨存放在一個文件方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要為大家詳細(xì)介紹了Vue+Element-U實現(xiàn)分頁顯示效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
組合式 API 是一系列 API 的集合，使我們可以使用函數(shù)而不是聲明選項的方式書寫 Vue 組件，這篇文章主要介紹了什么是Vue3的組合式?API,需要的朋友可以參考下2022-06-06
在Vue.js中使用Element UI庫時可以通過el-table組件來展示表格數(shù)據(jù),并支持列排序,下面這篇文章主要給大家介紹了關(guān)于前端使用el-table自帶排序功能\后端排序的相關(guān)資料,需要的朋友可以參考下2024-08-08
這篇文章主要介紹了vue子組件如何使用父組件傳過來的值，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
使用vue-draggable-plus實現(xiàn)拖拽排序
最近遇到一個需求,在 Vue3 的一個 H5 頁面當(dāng)中點擊拖拽圖標(biāo)上下拖動 tab 子項,然后點擊保存可以保存最新的 tab 項順序,同事說可以用 vue-draggable-plus 這個庫來實現(xiàn)拖拽,所以本文給大家介紹了如何使用vue-draggable-plus實現(xiàn)拖拽排序,需要的朋友可以參考下2024-01-01