Vue CLI4.0 webpack配置屬性之productionSourceMap用法
productionSourceMap
- Type:
boolean
- Default:
true
用途
設(shè)置生產(chǎn)環(huán)境的 source map 開(kāi)啟與關(guān)閉。
用法
module.exports = { publicPath: './', // 基本路徑 outputDir: 'dist', // 輸出文件目錄 assetsDir: './assets', indexPath: 'index.html', filenameHashing: true, // 生成的靜態(tài)資源在它們的文件名中包含了 hash 以便更好的控制緩存 lintOnSave: false, // eslint-loader 是否在保存的時(shí)候檢查 productionSourceMap: true, // 生產(chǎn)環(huán)境是否生成 sourceMap 文件 }
擴(kuò)展
什么是 source map?
source map 直譯過(guò)來(lái)就是資源地圖。所以,source map的作用就是定位。
source map定位的時(shí)瀏覽器控制臺(tái)輸出語(yǔ)句在項(xiàng)目文件的位置。
請(qǐng)看例子
在main.js
添加這樣一條代碼:console.log('test')
- 打包:
沒(méi)有開(kāi)啟 productionSourceMap
運(yùn)行后瀏覽器控制臺(tái)顯示效果:
開(kāi)啟productionSourceMap
運(yùn)行后瀏覽器控制臺(tái)顯示效果:
可以看出,開(kāi)啟productionSourceMap
后,瀏覽器控制臺(tái)明確的告訴我們test
這條結(jié)果的輸出語(yǔ)句在main.js
的20行。
這就是source map
的作用,對(duì)于開(kāi)發(fā)人員差錯(cuò)時(shí)非常有用的。
下面時(shí)開(kāi)啟/關(guān)閉productionSourceMap
打包出來(lái)的項(xiàng)目文件對(duì)比:
- 未開(kāi)啟:
- 開(kāi)啟:
可以看出,開(kāi)啟productionSourceMap
后,打包生成的 js 文件都有一個(gè) .map 文件。
這里要注意,只有 js 才有 .map 文件。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue在install時(shí)node-sass@4.14.1?postinstall:node?scripts/buil
最近在npm install 的時(shí)候遇到了個(gè)問(wèn)題,所以給大家總結(jié)下,下面這篇文章主要給大家介紹了關(guān)于vue在install時(shí)node-sass@4.14.1?postinstall:node?scripts/build.js錯(cuò)誤的解決方法,需要的朋友可以參考下2023-05-05vue項(xiàng)目實(shí)戰(zhàn)總結(jié)篇
離放假還有1天,今天小編抽空給大家分享前端時(shí)間小編做的vue項(xiàng)目,非常完整,需要的朋友參考下2018-02-02KKFileView結(jié)合vue多格式文件在線預(yù)覽功能實(shí)現(xiàn)
kkFileView是git的開(kāi)源在線文件預(yù)覽項(xiàng)目,這篇文章主要介紹了KKFileView結(jié)合vue多格式文件在線預(yù)覽功能,本文給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-02-02基于Vue組件化的日期聯(lián)動(dòng)選擇器功能的實(shí)現(xiàn)代碼
這篇文章主要介紹了基于Vue組件化的日期聯(lián)動(dòng)選擇器的實(shí)現(xiàn)代碼,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11vue3+vite2實(shí)現(xiàn)動(dòng)態(tài)綁定圖片的優(yōu)雅解決方案
這篇文章主要為大家詳細(xì)介紹了vue3+vite2實(shí)現(xiàn)動(dòng)態(tài)綁定圖片的優(yōu)雅解決方案,文中的示例代碼簡(jiǎn)潔易懂,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-08-08Vue.js系列之項(xiàng)目結(jié)構(gòu)說(shuō)明(2)
這篇文章主要介紹了Vue.js系列之項(xiàng)目結(jié)構(gòu)說(shuō)明(2)的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-01-01使用VUE實(shí)現(xiàn)一鍵復(fù)制內(nèi)容功能
這篇文章主要介紹了使用VUE實(shí)現(xiàn)一鍵復(fù)制內(nèi)容功能,功能就是當(dāng)我們點(diǎn)擊復(fù)制按鈕時(shí),會(huì)提示“復(fù)制成功”,這樣復(fù)制的內(nèi)容就可以在其他地方使用了,感興趣的朋友可以學(xué)習(xí)一下2023-04-04elementUI+Springboot實(shí)現(xiàn)導(dǎo)出excel功能的全過(guò)程
這篇文章主要介紹了elementUI+Springboot實(shí)現(xiàn)導(dǎo)出excel功能,現(xiàn)在也對(duì)這個(gè)導(dǎo)出功能進(jìn)行一個(gè)匯總整理寫(xiě)出來(lái),結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-09-09基于Vue實(shí)現(xiàn)Excel解析與導(dǎo)出功能詳解
導(dǎo)入導(dǎo)出excel這是前端做管理系統(tǒng)最常用的功能了,下面這篇文章主要給大家介紹了基于Vue實(shí)現(xiàn)Excel解析與導(dǎo)出功能的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-08-08Vue項(xiàng)目啟動(dòng)報(bào)錯(cuò)解決方法大全
這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目啟動(dòng)報(bào)錯(cuò)解決方法的相關(guān)資料,文中通過(guò)圖文將解決的過(guò)程介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-07-07