Vue npm run serv

发布时间 2024-01-09 13:14:45作者: emanlee

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)
})

 


vue-cli3和vue-cli2搭建项目的时候是不一样的。vue-cli2其实用的是webpack-dev-serve插件 。 而vue-cli3是vue-cli-service但其中原理是类似的。
————————————————
链接:https://blog.csdn.net/weixin_48596281/article/details/122865168