vue-cli-server怎么使用

这篇文章主要介绍了vue-cli-server怎么使用的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇vue-cli-server怎么使用文章都会有所收获，下面我们一起来看看吧。

一、入口

我们可以在package.json中看到npm run dev其实就是vue-cli-service serve，我们在安装vue-cli的时候可以一并将我们的vue-cli-service一同安装，然后执行npm install vue-cli-service --save-dev这样就可以在./node_modules/.bin目录下查看到vue-cli-service，相关代码如下：

@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" %*)

入口路径：./node_modules/@vue/cli-service/bin/vue-cli-service.js。

我们还可以去看下我们的vue-cli-service.js核心代码，如下所示：

const Service = require('../lib/Service')// 实例化Service// VUE_CLI_CONTEXT为undefined，所以传入的值为process.cwd()及项目所在目录const service = new Service(process.env.VUE_CLI_CONTEXT || process.cwd())const rawArgv = process.argv.slice(2)// minimist解析工具来对命令行参数进行解析const args = require('minimist')(rawArgv, {  boolean: [    // build    'modern',    'report',    'report-json',    'watch',    // serve    'open',    'copy',    'https',    // inspect    'verbose'  ]})// { //     _: [ 'serve' ],//     modern: false,//     report: false,//     'report-json': false,//     watch: false,//     open: false,//     copy: false,//     https: false,//     verbose: false ,// } const command = args._[0]// 执行service方法传入:'serve'、agrs、['serve','--open',...]service.run(command, args, rawArgv).catch(err => {  error(err)  process.exit(1)})

二、初始化配置

代码如下：

module.exports = class Service {  constructor (context, { plugins, pkg, inlineOptions, useBuiltIn } = {}) {    process.VUE_CLI_SERVICE = this    this.initialized = false    this.context = context    this.inlineOptions = inlineOptions    this.webpackChainFns = []    this.webpackRawConfigFns = []    this.devServerConfigFns = []    this.commands = {}    this.pkgContext = context    // 获取package.json中的依赖    this.pkg = this.resolvePkg(pkg)        // 如果有内联插件，不使用package.json中找到的插件    // 最终得到的plugins为内置插件+@vue/cli-plugin-*    // {id: 'xxx',apply: require('xxx')}    this.plugins = this.resolvePlugins(plugins, useBuiltIn)    // 解析每个命令使用的默认模式    //{ serve: 'development',    // build: 'production',    // inspect: 'development' }    this.modes = this.plugins.reduce((modes, { apply: { defaultModes }}) => {      return Object.assign(modes, defaultModes)    }, {})  }    // ......}

我们通过获取package.json中的依赖，通过read-pkg这个包来读取我们的package.json文件，并且通过json格式返回赋值给我们的this.pkg；之后初始化相关的插件。代码如下：

   resolvePlugins (inlinePlugins, useBuiltIn) {       const idToPlugin = id => ({         id: id.replace(/^.\//, 'built-in:'),         apply: require(id)       })              let plugins       const builtInPlugins = [         './commands/serve',         './commands/build',         './commands/inspect',         './commands/help',         // config plugins are order sensitive         './config/base',         './config/css',         './config/dev',         './config/prod',         './config/app'       ].map(idToPlugin)       if (inlinePlugins) {         // ...       } else {           // 开发环境依赖+生产环境的依赖中，获取cli-plugin-*插件         const projectPlugins = Object.keys(this.pkg.devDependencies || {})           .concat(Object.keys(this.pkg.dependencies || {}))           .filter(isPlugin)    // 验证是否为vue-cli插件 cli-plugin-*           .map(idToPlugin)         plugins = builtInPlugins.concat(projectPlugins)       }          // ...   }

1、通过初始化模式，从而解析每个命令，代码如下：

   // 解析每个命令使用的默认模式   //{ serve: 'development',   // build: 'production',   // inspect: 'development' }   this.modes = this.plugins.reduce((modes, { apply: { defaultModes }}) => {         return Object.assign(modes, defaultModes)   }, {})

之后在内联插件默认到处defaultModes这个文件如下所示：

   // serve.js   module.exports.defaultModes = {     serve: 'development'   }

三、解析命令参数

我们在这边通过minimist解析工具来对命令行参数进行解析，如下所示：

const args = require('minimist')(rawArgv, {  boolean: [    // build    // serve    'open',    'copy',    'https',  ]})// 'serve'、agrs、['serve','--open',...]

四、加载插件

我们可以通过运行service.run方法，加载环境变量，加载用户配置，应用插件，代码如下：

async run (name, args = {}, rawArgv = []) {    const mode = args.mode || (name === 'build' && args.watch ? 'development' :           this.modes[name])    // 加载环境变量，加载用户配置，应用插件    this.init(mode)      args._ = args._ || []      // 注册完的命令集里获取对应的命令    let command = this.commands[name]    // ....        const { fn } = command    return fn(args, rawArgv)}

1、加载环境变量，我们从项目中的根目录下的.env.(mode)文件读取环境变量，并写入到process.env（声明环境变量必须是VUE_APP_*，不然会被过滤掉）代码如下：

init (mode = process.env.VUE_CLI_MODE) {    // 加载development.env环境变量    if (mode) {      this.loadEnv(mode)    }    this.loadEnv()    // ...}// 加载环境变量方法（部分）loadEnv (mode) {    // 项目路径/.env.development    const basePath = path.resolve(this.context, `.env${mode ? `.${mode}` : ``}`)    // 项目路径/.env.development.local    const localPath = `${basePath}.local`    const load = path => {        const env = dotenv.config({ path, debug: process.env.DEBUG })        // 这里会先调用 dotenv（位于 node_modules/dotenv ）的 config 函数，最终会返回这样的格式 { parsed: { YOUR_ENV_KEY: '你设定的环境变量值' } }，并且写入到process.env里面        dotenvExpand(env)        logger(path, env)    }    load(localPath)    load(basePath)      if (mode) {      const defaultNodeEnv = (mode === 'production' || mode === 'test')        ? mode        : 'development'      if (shouldForceDefaultEnv || process.env.NODE_ENV == null) {        process.env.NODE_ENV = defaultNodeEnv      }    }  }

2、加载用户配置

我们这个步骤通过读取vue.config.js文件内部的配置就可以了，代码如下：

init (mode = process.env.VUE_CLI_MODE) {    // 加载用户配置    const userOptions = this.loadUserOptions()    this.projectOptions = defaultsDeep(userOptions, defaults())}

3、应用插件

//const idToPlugin = id => ({//    id: id.replace(/^.\//, 'built-in:'),//    apply: require(id)//})init (mode = process.env.VUE_CLI_MODE) {    // 应用插件    this.plugins.forEach(({ id, apply }) => {      apply(new PluginAPI(id, this), this.projectOptions)    })    // 从项目配置文件中应用webpack配置    if (this.projectOptions.chainWebpack) {      this.webpackChainFns.push(this.projectOptions.chainWebpack)    }    if (this.projectOptions.configureWebpack) {      this.webpackRawConfigFns.push(this.projectOptions.configureWebpack)    }  }}

通过前面初始化插件的时候(resolvePlugins方法)有一个apply属性，调用这个方法就可以导入对应的插件，这里就是调用了serve.js的方法。

4、注册命令

我们在在service注册serve命令，代码如下：

// serve.jsapi.registerCommand('serve', {    description: 'start development server',    usage: 'vue-cli-service serve [options] [entry]',    options: {}  }, async function serve (args) {   // ...});

五、配置启动服务

最后我们通过执行的serve.js 内注册serve时传递的方法。然后等webpack获取到配置之后，在通过实例化Compiler 传递给webpackDevServer，通过webpackDevServer实现自动编译和更新，代码如下：

// serve.js serve函数async function serve (args) {  //创建webpack编译器  const compiler = webpack(webpackConfig)  // compiler.run()即可完成一次编译打包  // 创建本地服务  const server = new WebpackDevServer(compiler, Object.assign({      clientLogLevel: 'none',      historyApiFallback: {        disableDotRule: true,        rewrites: [          { from: /./, to: path.posix.join(options.baseUrl, 'index.html') }        ]      },      contentBase: api.resolve('public'),      watchContentBase: !isProduction,      hot: !isProduction,      quiet: true,      compress: isProduction,      publicPath: options.baseUrl,      overlay: isProduction // TODO disable this        ? false        : { warnings: false, errors: true }    }, projectDevServerOptions, {      https: useHttps,      proxy: proxySettings,  }))    return new Promise((resolve, reject) => {    compiler.hooks.done.tap('vue-cli-service serve', stats => {        // ...    })    // ...    server.listen(port, host, err => {        if (err) {          reject(err)        }    })  })}

我们在这里获取了webpack配置：api.resolveWebpackConfig()，之后在通过获取 devServer 配置 注入 webpack-dev-server 和 hot-reload（HRM）的中间件入口从而创建 webpack-dev-server 实例 ，而且在启动webpack-dev-server后，在目标文件夹中是看不到编译后的文件的,实时编译后的文件都保存到了内存当中。

关于"vue-cli-server怎么使用"这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对"vue-cli-server怎么使用"知识都有一定的了解，大家如果还想学习更多知识，欢迎关注行业资讯频道。