vue-template-for-hbuilder

vue-template-for-hbuilder is a vue-cli project template derived from the Vue 2 Webpack boilerplate, modified so its dev mode outputs compiled files into a dist directory that HBuilder can point at for HTML5+ app development. It solves a specific problem: HBuilder lacked ES6 compilation and ran its own web server, so a standard Vue dev server could not push compiled results to real-device debugging.

What is vue-template-for-hbuilder?

vue-template-for-hbuilder is a scaffold for building HTML5+ hybrid mobile apps with Vue single-file components. It takes a standard vue-cli Webpack project as input and, instead of only serving the app from a local dev server, compiles changes into a dist folder that HBuilder opens. It is built for Vue 2 (the template is Webpack-based) and is distributed under the aOrz GitHub account, with 67 stars at the time of listing.

How does it work?

You scaffold the project with vue-cli, install dependencies, and run npm run dev, which automatically writes recompiled code into the dist directory. You then open the dist directory in HBuilder, open manifest.json, click the cloud option to obtain an appid, and sync that appid back into src/manifest.json before running on a real device. The README warns not to open the compiled files in HBuilder's own compiler, to avoid interfering with true-device testing.

What makes it stand out?

• HBuilder-oriented dev mode — npm run dev pushes compiled output to dist for HBuilder instead of only running a local server.
• Webpack plus vue-loader — handles single-file Vue components, with state-preserving hot reload.
• Lint-on-save — ESLint runs as you save, alongside source maps and a compilation error overlay.
• Separate web dev server — npm run webdev serves the app with hot reload at localhost:8080 for browser work.
• Production build — npm run build minifies JavaScript with UglifyJS, HTML with html-minifier, and extracts CSS into one file minified by cssnano.
• Versioned assets — static assets get version hashes for caching, with an auto-generated production index.html.
• Bundle analytics — npm run build --report builds with bundle-size reporting.
• Testing scripts — npm run unit (Karma, Mocha, PhantomJS, karma-webpack) and npm run e2e (Nightwatch, parallel browsers, auto-managed Selenium and chromedriver).

Who is it for?

• HBuilder users building hybrid apps: developers who want Vue single-file components and a Webpack build but still need HBuilder's real-device debugging and manifest/appid workflow.
• Teams migrating from MUI: the template's author moved from an MUI app to Vue and needed the two toolchains to coexist.
• Vue 2 developers shipping Webpack builds: anyone wanting the full vue-webpack-boilerplate feature set (hot reload, lint-on-save, unit and e2e tests, CSS extraction) inside a mobile-oriented HBuilder project.

What can you do with vue-template-for-hbuilder?

• Real-device Vue debugging: run npm run dev, open dist in HBuilder, and test a Vue app on a phone while its source stays in src.
• Browser-first development: use npm run webdev at localhost:8080 for hot-reload work, then switch to HBuilder output for device runs.
• Full-boilerplate builds and tests: produce a minified production bundle with hashed assets, or run Karma/Mocha unit tests and Nightwatch end-to-end tests.

FAQ

Is vue-template-for-hbuilder free?

Yes. It is a publicly available vue-cli template on GitHub and can be scaffolded with vue init aOrz/vue-template-for-hbuilder my-project; the README also includes optional WeChat group and donation links.

Which Vue version does it target?

It is built on the Vue 2.0-compatible Webpack template; the underlying boilerplate documents a separate vue init webpack#1.0 command for Vue 1.x projects.

Why output to dist instead of only running a dev server?

Because HBuilder compiles and serves apps itself, a plain local dev server could not push recompiled code into HBuilder's real-device debug mode, so npm run dev writes results directly to dist.

Does it include tests?

Yes. The template ships npm run unit (Karma, Mocha, PhantomJS, karma-webpack) and npm run e2e (Nightwatch with multiple browsers and auto-managed Selenium), plus a dependency-free build-script check run with node --test tests/build.test.cjs on Node.js 18 or newer.