api.registerCommand('serve', {
    // 一些终端提示信息
}, async function serve(args) {
    // ...
})

class PluginAPI {
    /**
     * @param {string} id - Id of the plugin.
     * @param {Service} service - A vue-cli-service instance.
     */
    constructor(id, service) {
        this.id = id
        this.service = service
    }

    registerCommand(name, opts, fn) {
        if (typeof opts === 'function') {
            fn = opts
            opts = null
        }
        this.service.commands[name] = {fn, opts: opts || {}}
    }
}

    api.chainWebpack(webpackConfig => {
    if (process.env.NODE_ENV !== 'production' && process.env.NODE_ENV !== 'test') {
        webpackConfig
            .devtool('eval-cheap-module-source-map')

        webpackConfig
            .plugin('hmr')
            .use(require('webpack/lib/HotModuleReplacementPlugin'))

        // https://github.com/webpack/webpack/issues/6642
        // https://github.com/vuejs/vue-cli/issues/3539
        webpackConfig
            .output
            .globalObject(`(typeof self !== 'undefined' ? self : this)`)

        if (!process.env.VUE_CLI_TEST && options.devServer.progress !== false) {
            webpackConfig
                .plugin('progress')
                .use(require('webpack/lib/ProgressPlugin'))
        }
    }
})

// resolve webpack config
const webpackConfig = api.resolveWebpackConfig()

// check for common config errors
validateWebpackConfig(webpackConfig, api, options)

// load user devServer options with higher priority than devServer
// in webpack config
const projectDevServerOptions = Object.assign(
    webpackConfig.devServer || {},
    options.devServer
)

const entry = args._[0]
if (entry) {
    webpackConfig.entry = {
        app: api.resolve(entry)
    }
}

 // resolve server options
const useHttps = args.https || projectDevServerOptions.https || defaults.https
const protocol = useHttps ? 'https' : 'http'
const host = args.host || process.env.HOST || projectDevServerOptions.host || defaults.host
portfinder.basePort = args.port || process.env.PORT || projectDevServerOptions.port || defaults.port
const port = await portfinder.getPortPromise()
const rawPublicUrl = args.public || projectDevServerOptions.public
const publicUrl = rawPublicUrl
    ? /^[a-zA-Z]+:\/\//.test(rawPublicUrl)
        ? rawPublicUrl
        : `${protocol}://${rawPublicUrl}`
    : null

const urls = prepareURLs(
    protocol,
    host,
    port,
    isAbsoluteUrl(options.publicPath) ? '/' : options.publicPath
)
const localUrlForBrowser = publicUrl || urls.localUrlForBrowser

const proxySettings = prepareProxy(
    projectDevServerOptions.proxy,
    api.resolve('public')
)

if (!isProduction) {
    const sockPath = projectDevServerOptions.sockPath || '/sockjs-node'
    const sockjsUrl = publicUrl
        // explicitly configured via devServer.public
        ? `?${publicUrl}&sockPath=${sockPath}`
        : isInContainer
            // can't infer public network url if inside a container...
            // use client-side inference (note this would break with non-root publicPath)
            ? ``
            // otherwise infer the url
            : `?` + url.format({
            protocol,
            port,
            hostname: urls.lanUrlForConfig || 'localhost'
        }) + `&sockPath=${sockPath}`
    const devClients = [
        // dev server client
        require.resolve(`webpack-dev-server/client`) + sockjsUrl,
        // hmr client
        require.resolve(projectDevServerOptions.hotOnly
            ? 'webpack/hot/only-dev-server'
            : 'webpack/hot/dev-server')
        // TODO custom overlay client
        // `@vue/cli-overlay/dist/client`
    ]

    if (process.env.APPVEYOR) {
        devClients.push(`webpack/hot/poll?500`)
    }
    // inject dev/hot client
    addDevClientToEntry(webpackConfig, devClients)
}

// create compiler
const compiler = webpack(webpackConfig)

// handle compiler error
compiler.hooks.failed.tap('vue-cli-service serve', msg => {
    error(msg)
    process.exit(1)
})

 // create server
const server = new WebpackDevServer(compiler, Object.assign({
    logLevel: 'silent',
    clientLogLevel: 'silent',
    historyApiFallback: {
        disableDotRule: true,
        rewrites: genHistoryApiFallbackRewrites(options.publicPath, options.pages)
    },
    contentBase: api.resolve('public'),
    watchContentBase: !isProduction,
    hot: !isProduction,
    injectClient: false,
    compress: isProduction,
    publicPath: options.publicPath,
    overlay: isProduction // TODO disable this
        ? false
        : {warnings: false, errors: true}
}, projectDevServerOptions, {
    https: useHttps,
    proxy: proxySettings,
    // eslint-disable-next-line no-shadow
    before(app, server) {
        // launch editor support.
        // this works with vue-devtools & @vue/cli-overlay
        app.use('/__open-in-editor', launchEditorMiddleware(() => console.log(
            `To specify an editor, specify the EDITOR env variable or ` +
            `add "editor" field to your Vue project config.\n`
        )))
        // allow other plugins to register middlewares, e.g. PWA
        api.service.devServerConfigFns.forEach(fn => fn(app, server))
        // apply in project middlewares
        projectDevServerOptions.before && projectDevServerOptions.before(app, server)
    },
    // avoid opening browser
    open: false
}))

['SIGINT', 'SIGTERM'].forEach(signal => {
    process.on(signal, () => {
        server.close(() => {
            process.exit(0)
        })
    })
})

if (args.stdin) {
  process.stdin.on('end', () => {
    server.close(() => {
      process.exit(0)
    })
  })

  process.stdin.resume()
}

    return new Promise((resolve, reject) => {
    // log instructions & open browser on first compilation complete
    let isFirstCompile = true
    compiler.hooks.done.tap('vue-cli-service serve', stats => {
        if (stats.hasErrors()) {
            return
        }

        let copied = ''
        if (isFirstCompile && args.copy) {
            try {
                require('clipboardy').writeSync(localUrlForBrowser)
                copied = chalk.dim('(copied to clipboard)')
            } catch (_) {
                /* catch exception if copy to clipboard isn't supported (e.g. WSL), see issue #3476 */
            }
        }

        const networkUrl = publicUrl
            ? publicUrl.replace(/([^/])$/, '$1/')
            : urls.lanUrlForTerminal

        console.log()
        console.log(`  App running at:`)
        console.log(`  - Local:   ${chalk.cyan(urls.localUrlForTerminal)} ${copied}`)
        if (!isInContainer) {
            console.log(`  - Network: ${chalk.cyan(networkUrl)}`)
        } else {
            console.log()
            console.log(chalk.yellow(`  It seems you are running Vue CLI inside a container.`))
            if (!publicUrl && options.publicPath && options.publicPath !== '/') {
                console.log()
                console.log(chalk.yellow(`  Since you are using a non-root publicPath, the hot-reload socket`))
                console.log(chalk.yellow(`  will not be able to infer the correct URL to connect. You should`))
                console.log(chalk.yellow(`  explicitly specify the URL via ${chalk.blue(`devServer.public`)}.`))
                console.log()
            }
            console.log(chalk.yellow(`  Access the dev server via ${chalk.cyan(
                `${protocol}://localhost:<your container's external mapped port>${options.publicPath}`
            )}`))
        }
        console.log()

        if (isFirstCompile) {
            isFirstCompile = false

            if (!isProduction) {
                const buildCommand = hasProjectYarn(api.getCwd()) ? `yarn build` : hasProjectPnpm(api.getCwd()) ? `pnpm run build` : `npm run build`
                console.log(`  Note that the development build is not optimized.`)
                console.log(`  To create a production build, run ${chalk.cyan(buildCommand)}.`)
            } else {
                console.log(`  App is served in production mode.`)
                console.log(`  Note this is for preview or E2E testing only.`)
            }
            console.log()

            if (args.open || projectDevServerOptions.open) {
                const pageUri = (projectDevServerOptions.openPage && typeof projectDevServerOptions.openPage === 'string')
                    ? projectDevServerOptions.openPage
                    : ''
                openBrowser(localUrlForBrowser + pageUri)
            }

            // Send final app URL
            if (args.dashboard) {
                const ipc = new IpcMessenger()
                ipc.send({
                    vueServe: {
                        url: localUrlForBrowser
                    }
                })
            }

            // resolve returned Promise
            // so other commands can do api.service.run('serve').then(...)
            resolve({
                server,
                url: localUrlForBrowser
            })
        } else if (process.env.VUE_CLI_TEST) {
            // signal for test to check HMR
            console.log('App updated')
        }
    })
    // 让devServer监听此次服务的端口和host
    server.listen(port, host, err => {
        if (err) {
            reject(err)
        }
    })
})