vuejs / vue-cli

🛠️ webpack-based tooling for Vue.js Development
https://cli.vuejs.org/
MIT License
29.78k stars 6.33k forks source link

Output network address for development build as qr code #6953

Open rr-it opened 2 years ago

rr-it commented 2 years ago

What problem does this feature solve?

In development stage of your app run serve and get this output:

 DONE  Compiled successfully in 10509ms
[…]
 App running at:
  - Local:   http://localhost:8080/ 
  - Network: http://192.168.0.123:8080/
[…]

Now open the app on multiple devices for testing: less typing by providing a qr code to open the network url.

Might look like this:

  - Network: http://192.168.0.123:8080/

█████████████████████████████
██ ▄▄▄▄▄ ██▀▄██▀ █▀█ ▄▄▄▄▄ ██
██ █   █ █▄▀█▄▀▀▄▄██ █   █ ██
██ █▄▄▄█ ██▄▀▀ ▀▄▄██ █▄▄▄█ ██
██▄▄▄▄▄▄▄█ █▄▀▄▀ █▄█▄▄▄▄▄▄▄██
██▄ ▄█  ▄▄ ▀█▀ ▀▄▀ ▄▄███▄█▀██
██ ▄██▄█▄ ▀▀ ▄ █▄ ▄▄▀███▄ ▄██
████▀▄█▄▄█▄█  █▄▄ ▀█▀▀▄ █▄ ██
██▄▀▄▄▀█▄▄▄█▄▀█▀▀▄▀█▄▀█▀▄ ▄██
██▄██▄██▄▄▀█▀▀ ▀▄▀ ▄▄▄ ▀█▀▀██
██ ▄▄▄▄▄ █ ▀▀▄ ▀▄█ █▄█ ▀  ▄██
██ █   █ █▄▀▀ ▄▀█    ▄ ▄█ ▄██
██ █▄▄▄█ █ ▀ ▀▄▄▄ ▀ ▄▄▀▄▀▀▄██
██▄▄▄▄▄▄▄█▄█▄█▄█▄▄▄▄▄▄▄██▄▄██
█████████████████████████████

What does the proposed API look like?

Use qrcode-terminal to output a qr code on terminal at:

https://github.com/vuejs/vue-cli/blob/c9f5af2e9484888685ffd1bd7e1150e39ec96d34/packages/%40vue/cli-service/lib/commands/serve.js#L265


See qrcode-webpack-plugin:

https://github.com/li-shuaishuai/qrcode-webpack-plugin/blob/dc83d87b60612b19a936d96ef1632775c0ba17df/index.js#L2

https://github.com/li-shuaishuai/qrcode-webpack-plugin/blob/dc83d87b60612b19a936d96ef1632775c0ba17df/index.js#L29-L41

ghost commented 2 years ago

I quite like the idea. Good job.