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)文章
Vue項目本地沒有問題但部署到服務(wù)器上提示錯誤(問題解決方案)
一個 VUE 的項目在本地部署沒有問題,但是部署到服務(wù)器上的時候提示訪問資源的錯誤,遇到這樣的問題如何解決呢?下面小編給大家?guī)砹薞ue項目本地沒有問題但部署到服務(wù)器上提示錯誤的解決方法,感興趣的朋友一起看看吧2023-05-05Vue reactive函數(shù)實現(xiàn)流程詳解
一個基本類型的數(shù)據(jù),想要變成響應(yīng)式數(shù)據(jù),那么需要通過ref函數(shù)包裹,而如果是一個對象的話,那么需要使用reactive函數(shù),這篇文章主要介紹了Vue reactive函數(shù)2023-01-01vue中axios處理http發(fā)送請求的示例(Post和get)
本篇文章主要介紹了vue中axios處理http請求的示例(Post和get),這里整理了詳細(xì)的代碼,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-10-10vue.js中關(guān)于點擊事件方法的使用(click)
這篇文章主要介紹了vue.js中關(guān)于點擊事件方法的使用(click),具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-08-08