解決vue-cli項(xiàng)目sourcemap因?yàn)槲募孛麑?dǎo)致的文件定位映射錯(cuò)誤問題
更新時(shí)間：2024年06月06日 14:46:21 作者：jaqi.l
這篇文章主要介紹了解決vue-cli項(xiàng)目sourcemap因?yàn)槲募孛麑?dǎo)致的文件定位映射錯(cuò)誤問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
vue-cli項(xiàng)目sourcemap文件重名導(dǎo)致的文件定位映射錯(cuò)誤
webpack會(huì)將所有源碼放在同一個(gè)目錄，項(xiàng)目中不同目錄下的index文件重名被覆蓋，導(dǎo)致調(diào)試時(shí)所在行與文件映射關(guān)系錯(cuò)亂
解決方案
使用module-eval-source-map
- vue.config.js文件：
module.exports = {
configureWebpack: {
// 處理 同名文件導(dǎo)致的SourceMap定位錯(cuò)誤問題
devtool: process.env.NODE_ENV === 'production' ? '' : 'module-eval-source-map',
}
}cheap-module-eval-source-map：不生成列映射，只是映射行數(shù) 因此不能解決上述問題
vue source-map設(shè)置，@符號(hào)使用
Source Map
Source Map 是一個(gè)信息文件，里面存儲(chǔ)著報(bào)錯(cuò)的位置信息，只要有了它，出錯(cuò)的時(shí)候，可以直接定位到開發(fā)時(shí)的原始代碼，而不是壓縮轉(zhuǎn)換后的代碼。
極大的方便我們測(cè)試，需要在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ā)布的時(shí)候，建議將devtool的值設(shè)置為nosources-source-map或者關(guān)閉sourceMAP
devtool:'nosources-source-map',
}@符號(hào)查找文件
需要在webpack.config.js里面設(shè)置。
module.exports = {
resolve: {
alias: {
//@符號(hào)表示src為查找文件的第一級(jí)目錄
'@': path.join(__dirname, './src/')
}
}
}總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了如何在vue中使用jointjs過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-05-05
這篇文章主要介紹了vue中$refs的用法及作用詳解,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2018-04-04
最近接了一個(gè)移動(dòng)端的項(xiàng)目，實(shí)現(xiàn)微信掃碼功能，今天小編利用這個(gè)平臺(tái)給大家分享vue實(shí)現(xiàn)二維碼掃描功能的實(shí)現(xiàn)代碼，需要的朋友參考下吧2021-08-08
Vue中使用echarts實(shí)現(xiàn)繪制人體動(dòng)態(tài)圖
這篇文章主要為大家詳細(xì)介紹了Vue中如何使用echarts實(shí)現(xiàn)繪制人體動(dòng)態(tài)圖,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-03-03
vue實(shí)現(xiàn)把接口單獨(dú)存放在一個(gè)文件方式
這篇文章主要介紹了vue實(shí)現(xiàn)把接口單獨(dú)存放在一個(gè)文件方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
Vue+Element-U實(shí)現(xiàn)分頁(yè)顯示效果
這篇文章主要為大家詳細(xì)介紹了Vue+Element-U實(shí)現(xiàn)分頁(yè)顯示效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11
組合式 API 是一系列 API 的集合，使我們可以使用函數(shù)而不是聲明選項(xiàng)的方式書寫 Vue 組件，這篇文章主要介紹了什么是Vue3的組合式?API,需要的朋友可以參考下2022-06-06
前端使用el-table自帶排序功能\后端排序方法實(shí)例
在Vue.js中使用Element UI庫(kù)時(shí)可以通過(guò)el-table組件來(lái)展示表格數(shù)據(jù),并支持列排序,下面這篇文章主要給大家介紹了關(guān)于前端使用el-table自帶排序功能\后端排序的相關(guān)資料,需要的朋友可以參考下2024-08-08
這篇文章主要介紹了vue子組件如何使用父組件傳過(guò)來(lái)的值，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
使用vue-draggable-plus實(shí)現(xiàn)拖拽排序
最近遇到一個(gè)需求,在 Vue3 的一個(gè) H5 頁(yè)面當(dāng)中點(diǎn)擊拖拽圖標(biāo)上下拖動(dòng) tab 子項(xiàng),然后點(diǎn)擊保存可以保存最新的 tab 項(xiàng)順序,同事說(shuō)可以用 vue-draggable-plus 這個(gè)庫(kù)來(lái)實(shí)現(xiàn)拖拽,所以本文給大家介紹了如何使用vue-draggable-plus實(shí)現(xiàn)拖拽排序,需要的朋友可以參考下2024-01-01