|
"Vue CLI is in Maintenance Mode!" https://cli.vuejs.org/
Vite is created by Vue's creator and is the recommended build tool
for Vue 3. It supports most of the configured conventions in Vue CLI.
Dev Server startup is 60X faster and HMR is noticeably faster ~50ms.
Better Tree-shaking support and modern ESM support.
This migration preserves all existing functionality while eliminating
Vue 2 legacy dependencies.
Build Output Comparison (gzipped):
Master (Webpack) Vite Delta
CSS: 39 KB 45 KB +6 KB (+15%)
JS: 505 KB 483 KB -22 KB (-4.4%)
Total dist: 556 KB 544 KB -12 KB (-2.2%)
Build time: ~29s ~7s ~4x faster
Build System Changes:
- Replace vue.config.js with vite.config.js
- Remove babel.config.js (Vite uses esbuild)
- Remove postcss.config.js (Vite handles PostCSS internally)
- Add index.html to project root with ESM module entry point
- Add custom Vite plugin for directory import resolution
- Rename .eslintrc.js to .eslintrc.cjs (ESM compatibility)
Dependency Updates:
- Remove @vue/cli-* packages and webpack-related dependencies
- Add vite, @vitejs/plugin-vue, @vitejs/plugin-basic-ssl
- Add vite-svg-loader, vite-plugin-compression
- Upgrade Bootstrap to 5.3.8
- Upgrade Sass to 1.97.2 (supports quietDeps option)
- Upgrade xterm to @xterm/xterm v6 (new package name)
- Upgrade xterm-addon-* to @xterm/addon-* packages
- Upgrade vue-i18n to v11
- Upgrade eslint to 8.57.1
- Upgrade axios-cache-interceptor to latest
Environment Variable Migration:
- Change VUE_APP_* prefix to VITE_* (Vite convention)
- Replace process.env with import.meta.env in source files
- Update .env.ibm, .env.intel example files
- Update documentation with new variable names
ESM Module Compatibility:
- Replace require('@/eventBus') with ESM imports (~23 files)
- Ensure event bus listeners are registered/unregistered with stable
handler references to prevent leaks
- Replace require.context with import.meta.glob in i18n.js
- Convert SVG inline loader to vite-svg-loader component imports
SCSS/Sass Updates:
- Remove tilde (~) prefix from node_modules imports
- Add silenceDeprecations and quietDeps for Bootstrap warnings
- Fix color() function syntax for Sass 2.0 compatibility
xterm.js v6 Migration:
- Update imports to @xterm/xterm, @xterm/addon-attach, @xterm/addon-fit
- Replace deprecated setOption() with constructor options
- Add CSS fix for helper textarea visibility
Dev Server:
- Configure HTTPS with @vitejs/plugin-basic-ssl
- Preserve proxy configuration for BMC backend
- Add WebSocket proxy auth token forwarding for /console, /kvm, /vm
- Configure HMR on separate WebSocket path (/ws_hmr)
X-Auth-Token Persistence (opt-in):
- Add VITE_STORE_SESSION env flag for non-cookie auth backends
- Persist X-Auth-Token to session cookie when enabled
- Enables direct browser navigation to Redfish endpoints
Follow-on: CI/testing updates (unit test runner + run-ci alignment)
Some Jest config changes skipped here since this follow-on commit
switches to Vitest.
follow-up change is here:
https://gerrit.openbmc.org/c/openbmc/webui-vue/+/86511
Tested: Sanity tested most navigational screens in the default UI,
including many different types of API calls.
Tested most build options.
Tested the new i18n:report and it is working correctly.
Change-Id: Ie84d1ed6121ffe7d2ddb379084d833b8d5a6fccf
Signed-off-by: Jason Westover <jwestover@nvidia.com>
|
