记录一个关于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项目中，也会出现配置了自动打开浏览器，但是却不会自动打开的问题。