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