简介

本文介绍Vue的vue-cli-service的用法。

官网

https://cli.vuejs.org/zh/guide/cli-service.html

https://cli.vuejs.org/zh/config/#vue-config-js

概述

vue-cli-service是把webpack-dev-server包装了一层，所以，webpack-dev-server的配置方法都可以拿过来用。

命令

vue-cli-service serve

说明

作用简述：运行服务。

vue-cli-service serve 命令会启动一个开发服务器 (基于 webpack-dev-server) 并附带模块热重载 (Hot-Module-Replacement)。

用法

用法：

1
2
3



vue-cli-service serve [options] [entry]

选项：

–open

在服务器启动时打开浏览器

–copy

在服务器启动时将 URL 复制到剪切版

–mode

指定环境模式 (默认值：development)

–host

指定 host (默认值：0.0.0.0)

–port

指定 port (默认值：8080)

–https

使用 https (默认值：false)

vue-cli-service build

说明

作用简述：打包。

1
2
3



vue-cli-service build

会在 dist/ 目录生成一个可用于生产环境的包。

打包的特点

压缩JS/CSS/HTML

自动的 vendor chunk splitting

这样可以更好地缓存。

chunk manifest 会内联在 HTML 里。

用法

用法：

1
2
3



vue-cli-service build [options] [entry|pattern]

选项：

–mode

指定环境模式 (默认值：production)

–dest

指定输出目录 (默认值：dist)

–modern

使用现代模式构建应用，为现代浏览器交付原生支持的 ES2015 代码，并生成一个兼容老浏览器的包用来自动回退。

–target

app | lib | wc | wc-async (默认值：app)

允许你将项目中的任何组件以一个库或 Web Components 组件的方式进行构建。详见：构建目标。

–name

库或 Web Components 模式下的名字 (默认值：package.json 中的 “name” 字段或入口文件名)

–no-clean

在构建项目之前不清除目标目录的内容

–report

生成 report.html 以帮助分析包内容

–report-json

生成 report.json 以帮助分析包内容。

例如：包中包含的模块们的大小。

–watch

监听文件变化

跨域

其他网址

问题

vue-cli-service不是内部或外部命令,也不是可运行的程序

1
2
3



npm install vue-cli-service -S