Vue npm run serv 执行的流程

Vue npm run serv

1.首先 npm run serve 会在 package.json 文件中寻找 scripts 中的 serve 属性（有的可能会是dev属性，根据自己项目结构来）

 

 
2. vue-cli-service serve 是什么呢？ 其实就是等同于去执行  node_modules\.bin\vue-cli-service 文件，

 

\node_modules\.bin\vue-cli-service

#!/bin/sh
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")

case `uname` in
    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;
esac

if [ -x "$basedir/node" ]; then
  "$basedir/node"  "$basedir/../@vue/cli-service/bin/vue-cli-service.js" "$@"
  ret=$?
else 
  node  "$basedir/../@vue/cli-service/bin/vue-cli-service.js" "$@"
  ret=$?
fi
exit $ret

 

\node_modules\.bin\vue-cli-service.cmd

@IF EXIST "%~dp0\node.exe" (
  "%~dp0\node.exe"  "%~dp0\..\@vue\cli-service\bin\vue-cli-service.js" %*
) ELSE (
  @SETLOCAL
  @SET PATHEXT=%PATHEXT:;.JS;=;%
  node  "%~dp0\..\@vue\cli-service\bin\vue-cli-service.js" %*
)

 

3.根据目录就会发现其实是执行对应的 js文件

 

\node_modules\@vue\cli-service\bin\vue-cli-service.js

#!/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
    // FIXME: --no-module, --no-unsafe-inline, no-clean, etc.
    'modern',
    'report',
    'report-json',
    'inline-vue',
    'watch',
    // serve
    'open',
    'copy',
    'https',
    // inspect
    'verbose'
  ]
})
const command = args._[0]

service.run(command, args, rawArgv).catch(err => {
  error(err)
  process.exit(1)
})

 

npm run serv  的配置可以通过在项目根目录下的 vue.config.js 文件中进行编辑

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true
})

 

module.exports = {
  devServer: {
    port: 8888, // 端口号
    host: '0.0.0.0', // 可以使用ip访问
    open: true, // 是否自动打开浏览器
    https: false, // 是否开启https
    proxy: {
      '/api': {
        target: '',
        ws: true,
        changeOrigin: true
      }
    } // 代理配置
  }
}

 
vue-cli3和vue-cli2搭建项目的时候是不一样的。vue-cli2其实用的是webpack-dev-serve插件 。 而vue-cli3是vue-cli-service但其中原理是类似的。

=====================================

vue-cli-service源码分析

https://segmentfault.com/a/1190000040982683

————————————————
链接：

https://segmentfault.com/a/1190000040982683

https://blog.csdn.net/mcylogo/article/details/105661153

https://blog.csdn.net/weixin_48596281/article/details/122865168

https://blog.csdn.net/pulledup/article/details/126844821

https://www.python100.com/html/82444.html