Record a little pit about vue-cli
Some time ago, I used the vue-cli-plugin-electron-builderplugin to cooperate with vue-cli 3.x/4.x to build the electronproject.
Run on my computer npm run electron:serve, start the electron application normally:
> 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...
As you can see from the above figure, cli first helped us start a localhost service, just like we used the traditional one npm run serve. Then start the electron service and load the locally started service win.loadURL(process.env.WEBPACK_DEV_SERVER_URL).
However, after my colleagues pulled the code through git and installed the dependencies, they found that only the serve service was started, and the electron program was not started, as follows:
> 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/
After debugging the cli source code, it is found that when the following code hasProjectYarn(api.getCwd())is executed, it will not continue to execute
//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
}
The original cli judged that if there are yarn.lockfiles in the project , use yarn to run the command, but my colleagues have been using npm to manage dependent packages, and there is no yarn environment on the computer, and I use yarn as package management, and submit the yarn.lock file when submitting the code. Go to the code warehouse.
But the strange thing here is that the code is clearly executed throw new Error('The project seems to require yarn but it's not installed.'), why is there no error output in the console? If any great god knows, I hope I can give some pointers, I am very grateful.
summary
To sum up, when there is a project yarn.lockbut the computer operating environment does not have a yarn environment, the electron program cannot be started.
It can also be seen from the cli code that in traditional vue-cli projects, there will also be a problem that the browser is configured to automatically open, but it will not open automatically.