記錄一個關於vue-cli的小小小小坑兒
前段時間使用vue-cli-plugin-electron-builder插件配合vue-cli 3.x/4.x搭建electron項目。
在我的電腦上運行npm run electron:serve，正常啟動electron應用：
> vue-demo1@0.1.0 electron:serve D:\demo\vue-demo1 > vue-cli-service electron:serve INFO Starting development server... 98% after emitting CopyPlugin DONE Compiled successfully in 1127ms App running at: - Local: http://localhost:8080/ - Network: http://172.23.63.27:8080/ Note that the development build is not optimized. To create a production build, run yarn build. Bundling main process... DONE Compiled successfully in 751ms File Size Gzipped dist_electron\index.js 651.74 KiB 148.31 KiB Images and other types of assets omitted. INFO Launching Electron...
從上圖可以看出，cli先是幫我們啟動了一個localhost服務，就像我們使用傳統的npm run serve。然后啟動electron服務，並加載本地啟動的服務win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)。
但是，同事通過git拉取代碼，並安裝依賴后，發現只啟動serve服務，並沒有啟動electron程序，如下：
> vue-demo1@0.1.0 electron:serve D:\demo\vue-demo1 > vue-cli-service electron:serve INFO Starting development server... 98% after emitting CopyPlugin DONE Compiled successfully in 1170ms App running at: - Local: http://localhost:8080/ - Network: http://172.23.63.27:8080/
經調試cli源碼發現，當執行到下面代碼hasProjectYarn(api.getCwd())時就不繼續往下執行了
// node_modules\@vue\cli-service\lib\commands\serve.js
const {
hasProjectYarn
} = require('@vue/cli-shared-utils')
module.exports = (api, options) => {
// line 279
const buildCommand = hasProjectYarn(api.getCwd()) ? `yarn build` : hasProjectPnpm(api.getCwd()) ? `pnpm run build` : `npm run build`；
if (args.open || projectDevServerOptions.open) {
const pageUri = (projectDevServerOptions.openPage && typeof projectDevServerOptions.openPage === 'string') ? projectDevServerOptions.openPage : '';
// 打開瀏覽器
openBrowser(localUrlForBrowser + pageUri)
}
}
// node_modules\@vue\cli-shared-utils\lib\env.js
exports.hasProjectYarn = (cwd) => {
if (_yarnProjects.has(cwd)) {
return checkYarn(_yarnProjects.get(cwd))
}
const lockFile = path.join(cwd, 'yarn.lock')
const result = fs.existsSync(lockFile)
_yarnProjects.set(cwd, result)
return checkYarn(result)
}
function checkYarn (result) {
if (result && !exports.hasYarn()) throw new Error(`The project seems to require yarn but it's not installed.`)
return result
}
原來 cli中判斷如果項目中存在yarn.lock文件，就使用yarn運行命令，但是同事一直使用npm管理依賴包，電腦上沒有yarn環境，而我用的yarn作為包管理，提交代碼的時候將yarn.lock文件提交到了代碼倉庫。
但這里比較奇怪的是，代碼中明明執行了throw new Error('The project seems to require yarn but it's not installed.'),控制台為什么沒有任何錯誤輸出呢？哪位大神知道的話希望可以指點一二，不勝感激。
總結
總結一下，當一個項目有yarn.lock但是電腦運行環境沒有yarn環境時，就會出現啟動不了electron程序的情況。
從cli代碼中也可以看出，在傳統vue-cli項目中，也會出現配置了自動打開瀏覽器，但是卻不會自動打開的問題。