Production Deployment

Introduction

Deployment is the final stage of a project. One of the most crucial components of the software development process is software deployment. Deployment is how developers deploy applications, modules, updates, and patches to users. The methods used by developers to create, test, and deploy new code impact how quickly and how well a product responds to changes in customer preferences or requirements.

Turn on Production Mode

Vue delivers a lot of warnings throughout development to assist you in avoiding common errors and traps. On the other hand, these warning strings become meaningless in production and bloat the payload size of your program. Furthermore, several of these warning checks have low runtime costs that can be eliminated in production mode.

Without Build Tools

Make sure to use the minified version for production if you're using the complete build, which means integrating Vue directly via a script tag without utilizing a build tool. This information is available in the installation guide.

    With Build Tools

The production model will be decided using a build tool like Webpack or Browserify. By default, process.env.NODE_ENV in Vue's source code will be in development mode. To enable Vue's production mode, both build tools include means to overwrite this variable, and minifiers will strip warnings throughout the build. Although Vue CLI has this pre-configured for you, it's still helpful to know how it's done:

  Webpack

We can use the mode option in Webpack 4+:

module.exports = {
  mode: 'production'
}

But in Webpack 3 and earlier, we’ll need to use DefinePlugin:

var webpack = require('webpack')

module.exports = {
  // ...
  plugins: [
    // ...
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('production')
    })
  ]
}

Browserify

• With the actual NODE_ENV environment variable set to "production," run your bundling command. This instructs vueify to exclude code related to hot-reloading and development.
• To envify your package, use a global envify transform. This enables the minifier to remove all Vue's source code warnings, which are wrapped in env variable conditional blocks. Consider the following scenario:

NODE_ENV=production browserify -g envify -e main.js | uglifyjs -c -m > build.js

• Or, using envify with Gulp:

// To provide environment variables, use the envify custom module.
var envify = require('envify/custom')

browserify(browserifyOptions)
  .transform(vueify)
  .transform(
    // To process node modules files, you'll need this.
    { global: true },
    envify({ NODE_ENV: 'production' })
  )
  .bundle()

• Using envify with Grunt and grunt-browserify:

// To provide environment variables, use the envify custom module.
var envify = require('envify/custom')
 
browserify: {
  dist: {
    options: {
      // Function to deviate from grunt-browserify's default order
      configure: b => b
        .transform('vueify')
        .transform(
          // To process node modules files, you'll need this.
          { global: true },
          envify({ NODE_ENV: 'production' })
        )
        .bundle()
    }
  }
}

Rollup

Use @rollup/plugin-replace:

const replace = require('@rollup/plugin-replace')

 
rollup({
  // ...
  plugins: [
    replace({
      'process.env.NODE_ENV': JSON.stringify( 'production' )
    })
  ]
}).then(...)