vue cli 3.0下配置開(kāi)發(fā)環(huán)境下的sourcemap問(wèn)題
vue cli 3.0下配置開(kāi)發(fā)環(huán)境下的sourcemap
問(wèn)題描述
vue cli 3.0環(huán)境下開(kāi)發(fā)調(diào)試過(guò)程中發(fā)現(xiàn)部分vue的源碼找不到，調(diào)試窗口中同名字的vue文件最多只能出現(xiàn)一個(gè)，而且文件的位置也不對(duì)應(yīng)相應(yīng)的文件夾，直接在webpack://根目錄下羅列出來(lái)
問(wèn)題分析
因?yàn)槭怯玫膙ue cli 3.0版本，與2.x的配置文件改變了很多，所以老版本的配置不能復(fù)制過(guò)來(lái)使用。
網(wǎng)上查找了很多資料，都是提的配置productionSourceMap為true，如下，然而我的工程里一開(kāi)始就已經(jīng)將該項(xiàng)配置為true，結(jié)果還是如上所述，
module.exports = {
productionSourceMap: true,
}也在官網(wǎng)上看了vue cli 3.0版本詳細(xì)配置說(shuō)明，也是描述productionSourceMap為開(kāi)發(fā)環(huán)境源碼配置項(xiàng)，然結(jié)果顯然說(shuō)明不是的
于是各種查找，各種嘗試，各種研究，最終總算是成功了，配置如下：
const debug = process.env.NODE_ENV !== 'production'
module.exports = {
……//自己的其他配置
configureWebpack: config => {
if (debug) { // 開(kāi)發(fā)環(huán)境配置
config.devtool = 'source-map'
}
},
……//自己的其他配置
}配置成功后，調(diào)試窗口中源碼位置的webpack://根目錄下會(huì)多出一個(gè)src文件夾，里面就有所有的源碼了
vue如何關(guān)閉sourceMap
vue打包后出現(xiàn)一些map文件的解決辦法：
問(wèn)題
可能很多人在做vue項(xiàng)目打包，打包之后js中，會(huì)自動(dòng)生成一些map文件，那我們?cè)趺窗阉サ舨灰兀?/p>
1，運(yùn)行 cnpm run build 開(kāi)始打包
2，會(huì)在項(xiàng)目目錄下自動(dòng)創(chuàng)建dist目錄，打包好的文件都在其中
解決辦法
去src/config/index.js中改一個(gè)參數(shù)：
productionSourceMap:false
把這個(gè)改為false。
不然在最終打包的文件中會(huì)出現(xiàn)一些map文件，map文件的作用在于：項(xiàng)目打包后，代碼都是經(jīng)過(guò)壓縮加密的，如果運(yùn)行時(shí)報(bào)錯(cuò)，輸出的錯(cuò)誤信息無(wú)法準(zhǔn)確得知是哪里的代碼報(bào)錯(cuò)。
有了map就可以像未加密的代碼一樣，準(zhǔn)確的輸出是哪一行哪一列有錯(cuò)。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了一些vue使用axios的小技巧,文中的示例代碼講解詳細(xì),對(duì)我們深入掌握vue有一定的幫助,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-10-10
Vue的路由配置過(guò)程(Vue2和Vue3的路由配置)
這篇文章回顧了Vue2和Vue3中路由的配置步驟,包括安裝正確的路由版本、創(chuàng)建路由實(shí)例、配置routes以及在入口文件中注冊(cè)路由,Vue2中使用Vue.use(VueRouter),而Vue3中使用createRouter和createWebHashHistory2025-01-01
這篇文章主要介紹了深入解讀VUE中的異步渲染的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
Vue.js每天必學(xué)之表單控件綁定，如何在表單控件元素上創(chuàng)建雙向數(shù)據(jù)綁定，感興趣的小伙伴們可以參考一下2016-09-09
vue雙向綁定數(shù)據(jù)限制長(zhǎng)度的方法
這篇文章主要為大家詳細(xì)介紹了vue雙向綁定數(shù)據(jù)限制長(zhǎng)度的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-11-11
Vue項(xiàng)目本地沒(méi)有問(wèn)題但部署到服務(wù)器上提示錯(cuò)誤(問(wèn)題解決方案)
一個(gè) VUE 的項(xiàng)目在本地部署沒(méi)有問(wèn)題，但是部署到服務(wù)器上的時(shí)候提示訪問(wèn)資源的錯(cuò)誤，遇到這樣的問(wèn)題如何解決呢？下面小編給大家?guī)?lái)了Vue項(xiàng)目本地沒(méi)有問(wèn)題但部署到服務(wù)器上提示錯(cuò)誤的解決方法，感興趣的朋友一起看看吧2023-05-05
Vue reactive函數(shù)實(shí)現(xiàn)流程詳解
一個(gè)基本類(lèi)型的數(shù)據(jù),想要變成響應(yīng)式數(shù)據(jù),那么需要通過(guò)ref函數(shù)包裹,而如果是一個(gè)對(duì)象的話,那么需要使用reactive函數(shù),這篇文章主要介紹了Vue reactive函數(shù)2023-01-01
uniapp嵌套webview無(wú)法返回上一級(jí)解決方式
uniapp是一款非常強(qiáng)大的跨平臺(tái)開(kāi)發(fā)框架,它可以讓我們只編寫(xiě)一份代碼,就能在多個(gè)平臺(tái)上運(yùn)行,這篇文章主要給大家介紹了關(guān)于uniapp嵌套webview無(wú)法返回上一級(jí)的解決方式,需要的朋友可以參考下2024-05-05
vue中axios處理http發(fā)送請(qǐng)求的示例（Post和get）
本篇文章主要介紹了vue中axios處理http請(qǐng)求的示例（Post和get），這里整理了詳細(xì)的代碼,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
vue.js中關(guān)于點(diǎn)擊事件方法的使用(click)
這篇文章主要介紹了vue.js中關(guān)于點(diǎn)擊事件方法的使用(click)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08