用vue cli創(chuàng)建一個(gè)項(xiàng)目

vue create project-name

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.

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

這里如果我們運(yùn)行 npm run serve, 實(shí)際上運(yùn)行的就是 vue-cli-service serve
這個(gè)源碼我們可以在**./node_modules/.bin/vue-cli-service **打開查看

#!/usr/bin/env node

const { semver, error } = require('@vue/cli-shared-utils')
const requiredVersion = require('../package.json').engines.node

if (!semver.satisfies(process.version, requiredVersion, { includePrerelease: true })) {
  error(
    `You are using Node ${process.version}, but vue-cli-service ` +
    `requires Node ${requiredVersion}.\nPlease upgrade your Node version.`
  )
  process.exit(1)
}

const Service = require('../lib/Service')
const service = new Service(process.env.VUE_CLI_CONTEXT || process.cwd())

const rawArgv = process.argv.slice(2)
const args = require('minimist')(rawArgv, {
  boolean: [
    // build
    'modern',
    'report',
    'report-json',
    'inline-vue',
    'watch',
    // serve
    'open',
    'copy',
    'https',
    // inspect
    'verbose'
  ]
})

const command = args._[0]
console.log('command')  // serve

service.run(command, args, rawArgv).then( val => {
  console.log('val')
  console.log(val)
}).catch(err => {
  error(err)
  process.exit(1)
})

這里我們可以看到運(yùn)行的過程：

service.run(command, args, rawArgv).then( val => {
  console.log('val')
  console.log(val)
}).catch(err => {
  error(err)
  process.exit(1)
})

我們可以了解到val的值是

{ server:
   Server {
     compiler:
      Compiler {
        _pluginCompat: [SyncBailHook],
        hooks: [Object],
        name: undefined,
        parentCompilation: undefined,
        outputPath: '/Users/xiaored/Documents/works/vue-cli2/hello-world/dist',
        outputFileSystem: [MemoryFileSystem],
        inputFileSystem: [CachedInputFileSystem],
        recordsInputPath: undefined,
        recordsOutputPath: undefined,
        records: [Object],
        removedFiles: Set {},
        fileTimestamps: Map {},
        contextTimestamps: Map {},
        resolverFactory: [ResolverFactory],
        infrastructureLogger: [Function: logger],
        ........

可看到一個(gè)service的服務(wù)運(yùn)行，而這個(gè)service實(shí)際上是：

const Service = require('../lib/Service')
const service = new Service(process.env.VUE_CLI_CONTEXT || process.cwd())

這是一個(gè)類Service的實(shí)例對象庇茫，而這個(gè)類Service的位置在：
@vue > cli-service下文件夾lib下的Service.js文件：

module.exports = class Service {
  constructor (context, { plugins, pkg, inlineOptions, useBuiltIn } = {}) {
  ......

對應(yīng)的設(shè)置publicPath,outputDir.... 設(shè)置在
@vue > cli-service下文件夾lib下options.js文件中

exports.defaults = () => ({
  // project deployment base
  publicPath: '/',

  // where to output built files
  outputDir: 'dist',

  // where to put static assets (js/css/img/font/...)
  assetsDir: '',

  // filename for index.html (relative to outputDir)
  indexPath: 'index.html',

  // whether filename will contain hash part
  filenameHashing: true,

  // boolean, use full build?
  runtimeCompiler: false,

  // deps to transpile
  transpileDependencies: [
    /* string or regex */
  ],

  // sourceMap for production build?
  productionSourceMap: !process.env.VUE_CLI_TEST,

  // use thread-loader for babel & TS in production build
  // enabled by default if the machine has more than 1 cores
  parallel: hasMultipleCores(),

  // multi-page config
  pages: undefined,

  // <script type="module" crossorigin="use-credentials">
  // #1656, #1867, #2025
  crossorigin: undefined,

  // subresource integrity
  integrity: false,

  css: {
    // extract: true,
    // modules: false,
    // sourceMap: false,
    // loaderOptions: {}
  },

  // whether to use eslint-loader
  lintOnSave: 'default',

  devServer: {
    /*
    open: process.platform === 'darwin',
    host: '0.0.0.0',
    port: 8080,
    https: false,
    hotOnly: false,
    proxy: null, // string | Object
    before: app => {}
  */
  }
})

服務(wù)器端口設(shè)置文件：
@vue > cli-service > lib > commands文件夾下的serve.js文件：

const defaults = {
  host: '0.0.0.0',
  port: 8080,
  https: false
}