雨山

Set environment variables for bundling Vue

When bundling the "esm-bundler" build of Vue with esbuild or similar, this warning might appear in the browser console:

Feature flags __VUE_OPTIONS_API__, __VUE_PROD_DEVTOOLS__, __VUE_PROD_HYDRATION_MISMATCH_DETAILS__ are not explicitly defined. You are running the esm-bundler build of Vue, which expects these compile-time feature flags to be globally injected via the bundler config in order to get better tree-shaking in the production bundle.

For more details, see https://link.vuejs.org/feature-flags.

In esbuild, you can set those environment variables in the build command:

npx esbuild \
  path/to/entry.mjs \
  --bundle \
  --define:__VUE_OPTIONS_API__=true \
  --define:__VUE_PROD_DEVTOOLS__=false \
  --define:__VUE_PROD_HYDRATION_MISMATCH_DETAILS__=false \
  --outfile=path/to/bundle.js

NOTE: While the information above is still useful, there maybe advantages to using the "esm-browser.prod" build of Vue instead of the "esm-bundler" build. This is for two reasons: (1) when using the "esm-browser.prod" build, the tree-shaking warning mentioned below never appears; and (2) the bundles produced using "esm-browser.prod" are about half the size of those produced using the "esm-bundler" build (e.g., 259.0kb vs. 570.2kb in a small demo I made)! However, I've also encountered troubles using this build with VueRouter and Vuex — though it's entirely possible I just don't know what I'm doing!