vue-cli/docs/cli-service.md

CLI Service

• Using the Binary
• serve
  • Configuring Proxy
• build
  • Caching and Parallel Mode
  • Building as Library or Web Component
• inspect
• Checking All Available Commands

Using the Binary

Inside a Vue CLI project, @vue/cli-service installs a binary named vue-cli-service. You can access the binary directly as vue-cli-service in npm scripts, or as ./node_modules/.bin/vue-cli-service from the terminal.

This is what you will see in the package.json of a project using the default preset:

{
  "scripts": {
    "serve": "vue-cli-service serve --open",
    "build": "vue-cli-service build"
  }
}

serve

Usage: vue-cli-service serve [options]

Options:

  --open    open browser on server start
  --mode    specify env mode (default: development)
  --host    specify host (default: 0.0.0.0)
  --port    specify port (default: 8080)
  --https   use https (default: false)

vue-cli-service serve starts a dev server based on webpack-dev-server. It comes with hot-module-replacement (HMR) out of the box.

You can configure the dev server's behavior using the devServer option in vue.config.js:

module.exports = {
  devServer: {
    open: process.platform === 'darwin',
    host: '0.0.0.0',
    port: 8080,
    https: false,
    hotOnly: false,
    proxy: null, // string | Object
    before: app => {
      // app is an express instance
    }
  }
}

In addition to these default values, all options for webpack-dev-server are also supported.

Configuring Proxy

devServer.proxy can be a string pointing to the development API server:

module.exports = {
  devServer: {
    proxy: 'http://localhost:4000'
  }
}

This will tell the dev server to proxy any unknown requests (requests that did not match a static file) to http://localhost:4000.

If you want to have more control over the proxy behavior, you can also use an object with path: options pairs. Consult http-proxy-middleware for full options:

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: '<url>',
        ws: true,
        changeOrigin: true
      },
      '/foo': {
        target: '<other_url>'
      }
    }
  }
}

build

Usage: vue-cli-service build [options] [entry|pattern]

Options:

  --mode    specify env mode (default: production)
  --dest    specify output directory (default: dist)
  --target  app | lib | wc | wc-async (default: app)
  --name    name for lib or web-component mode (default: "name" in package.json or entry filename)

vue-cli-service build produces a production-ready bundle in the dist/ directory, with minification for JS/CSS/HTML and auto vendor chunk splitting for better caching. The chunk manifest is inlined into the HTML.

Caching and Parallel Mode

• cache-loader is enabled for Babel/TypeScript transpilation by default.
• thread-loader will be enabled for Babel/TypeScript transpilation when the machine has more than 1 CPU cores.

Building as Library or Web Components

It is also possible to build any component(s) inside your project as a library or as web components. See Build Targets for more details.

inspect

Usage: vue-cli-service inspect [options] [...paths]

Options:

  --mode    specify env mode (default: development)

You can use vue-cli-service inspect to inspect the webpack config inside a Vue CLI project. See Inspecting Webpack Config for more details.

Checking All Available Commands

Some CLI plugins will inject additional commands to vue-cli-service. For example, @vue/cli-plugin-eslint injects the vue-cli-service lint command. You can see all injected commands by running:

./node_modules/.bin/vue-cli-service help

You can also learn about the available options of each command with:

./node_modules/.bin/vue-cli-service help [command]