mirror of
https://github.com/vuejs/vue-cli.git
synced 2026-03-17 15:21:10 -05:00
145 lines
4.2 KiB
Markdown
145 lines
4.2 KiB
Markdown
## CLI Service
|
|
|
|
- [Using the Binary](#using-the-binary)
|
|
- [serve](#serve)
|
|
- [Configuring Proxy](#configuring-proxy)
|
|
- [build](#build)
|
|
- [Caching and Parallel Mode](#caching-and-parallel-mode)
|
|
- [Building as Library or Web Component](#building-as-library-or-web-component)
|
|
- [inspect](#inspect)
|
|
- [Checking All Available Commands](#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:
|
|
|
|
``` json
|
|
{
|
|
"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](https://github.com/webpack/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`:
|
|
|
|
``` 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`](https://webpack.js.org/configuration/dev-server/) are also supported.
|
|
|
|
#### Configuring Proxy
|
|
|
|
`devServer.proxy` can be a string pointing to the development API server:
|
|
|
|
``` js
|
|
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](https://github.com/chimurai/http-proxy-middleware#proxycontext-config) for full options:
|
|
|
|
``` js
|
|
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](./build-targets.md) 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](./webpack.md#inspecting-the-projects-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:
|
|
|
|
``` sh
|
|
./node_modules/.bin/vue-cli-service help
|
|
```
|
|
|
|
You can also learn about the available options of each command with:
|
|
|
|
``` sh
|
|
./node_modules/.bin/vue-cli-service help [command]
|
|
```
|