Close read Vue official documentation series 🎉

Enable the production mode

Differences from a development environment:

  • The code gets compressed.
  • Warning messages in the code are removed (for better performance).

Do not use build tools

You need to use the full version of vue.js (both compiler and runtime versions). You need to determine the environment differences by yourself. The production environment needs to use the vue.min.js compressed version.

Using build tools

When using the build tool, the Vue source code will determine whether to enable production mode based on the value of the environment variable process.env.node_env. The default is development mode.

This judgment is usually preconfigured on the Vue CLI when different commands are executed, such as NPM run serve or NPM run build.

To customize the configuration, see:

  • webpack 4+, directly in the configuration file that serves the different environmentmode:"production"Set.
  • webpack 3, need the help of DefinePluginPlug-in configuration.

Template compilation

In a purely javascript-driven way, a “compiler” is called on the browser side to compile the template as a string, get the rendering function, and then execute the runtime code to create the virtual DOM and render the page content.

Single-file components (SFC) precompile templates in conjunction with build tools, which precompile templates into rendering functions. In this way, the browser-side just needs to execute the runtime code and create the virtual DOM for rendering.

In contrast, for medium to large applications or for better performance, precompiled templates are recommended.

If you need to use a build tool to compile the template separately, rather than a single-file component, you can use the vue-template-loader loader.

Extract the COMPONENT’s CSS

When using a single-file component, the CSS within the component is dynamically injected through JavaScript in the form of a

In addition, switching themes may require the styles of different themes to be extracted separately into the corresponding theme style file in advance for global overwriting.

webpack + vue-loader

Trace runtime errors

ErrorHandler is a global hook function that can catch runtime errors during component rendering.

Remember from the “Testing” section that the balanced end-to-end solution is a combination of Cypress + Sentry, so here we can use it with the error-tracking service.

Sentry also officially provides integration with Vue.

Sentry For Vue