简介

本文介绍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

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

vue-cli-service build

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

打包的特点

压缩JS/CSS/HTML 自动的 vendor chunk splitting 这样可以更好地缓存。

chunk manifest 会内联在 HTML 里。

用法

用法：

1

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

npm install vue-cli-service -S