問題
專案啟動後異常日誌
./node_modules/@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.js 1:4153 Module parse failed: Unexpected token (1:4153) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders ... | //# sourceMappingURL=leaflet-geoman.js.map | @ ./src/hook/leafletjs/drawTools.js 3:0-40 @ ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader-v16/dist??ref--1-1!./src/views/snzw/patrolMap/index.vue?vue&type=script&setup=true&lang=js @ ./src/views/snzw/patrolMap/index.vue?vue&type=script&setup=true&lang=js @ ./src/views/snzw/patrolMap/index.vue @ ./src/router/index.ts @ ./src/main.ts @ multi (webpack)-dev-server/client?http://192.168.0.10:8010&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.ts
問題分析
日誌指出 /src/hook/leafletjs/drawTools.js 檔案內部出現錯誤，檢視該檔案
可以看引入該包引起的錯誤，由編譯失敗的日誌可以看出 @geoman-io/leaflet-geoman-free 包內 1:4153 位置出現錯誤，日誌標註為 webpack loader 無法正常處理該檔案，看一下錯誤具體位置.
結論
根據錯誤位置可以得出，該包內部使用了 ECMA2020 的鏈式語法，該語法無法正常被解析。正常情況專案中的 js 檔案會被 babel-loader 解析，但是該檔案是 node_modules中的，所以 vue-cli專案內的 babel-loader 會預設忽略該目錄中的檔案不進行編譯（請查閱 vue-cli 文件）。
解決
將
@geoman-io/leaflet-geoman-free加入到 babel-loader 中編譯
在 vue.config.js 中配置transpileDependencies
# vue.config.js
module.exports = {
transpileDependencies: ["@geoman-io/leaflet-geoman-free"]
}
檢視
@geoman-io/leaflet-geoman-free官方的issues
查閱到有人遇到了類似的問題，在 2.16.0版本內官方確實使用了新的語法 （github.com/geoman-io/l…），給出方案是使用 import "@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.min.js"min 檔案；因為我們使用的是最新版本，引用後問題依舊無法解決（固定版本至2.14.2後也可以解決）
最後
我們經常在專案的開發過程中，前期未固定npm包的版本，後期專案重新安裝包後，出現包版本小版本升級，導致專案出現了一些不可控的問題，因此在開發專案過程中，儘量固定開發中的包版本。
