快捷導(dǎo)航

vue cli 3.0下配置開發(fā)環(huán)境下的sourcemap問(wèn)題

更新時(shí)間：2024年06月06日 09:56:03 作者：chgiser

這篇文章主要介紹了vue cli 3.0下配置開發(fā)環(huán)境下的sourcemap問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vue cli 3.0下配置開發(fā)環(huán)境下的sourcemap

問(wèn)題描述

vue cli 3.0環(huán)境下開發(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，如下，然而我的工程里一開始就已經(jīng)將該項(xiàng)配置為true，結(jié)果還是如上所述，

module.exports = {
productionSourceMap: true,
}

也在官網(wǎng)上看了vue cli 3.0版本詳細(xì)配置說(shuō)明，也是描述productionSourceMap為開發(fā)環(huán)境源碼配置項(xiàng)，然結(jié)果顯然說(shuō)明不是的

于是各種查找，各種嘗試，各種研究，最終總算是成功了，配置如下：

const debug = process.env.NODE_ENV !== 'production'
module.exports = {
……//自己的其他配置
    configureWebpack: config => {
    if (debug) { // 開發(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 開始打包

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ò)。