vue-cli-service

是一个构建(build)编译vue项目的工具，提供了服务页面渲染的功能（serve)

它的功能就是把vue源码编译为静态页面输出到dest指定的目录。通常是dist目录，build构建运行后输出到dist的文件可以直接放到服务器上面渲染的！

ue-cli-service build 会在dist/ 目录下面产生一个可用于生产环境的包，带有 JS/CSS/HTML 的压缩，和为更好地缓存而做的 vendor chunk splitting。它的shunk manifest 会内敛在HTML里

用法：vue-cli-service build [options] [entry|pattern]
 
选项：
 
  --mode        指定环境模式 (默认值：production)
  --dest        指定输出目录 (默认值：dist)
  --modern      面向现代浏览器带自动回退地构建应用
  --target      app | lib | wc | wc-async (默认值：app)
  --name        库或 Web Components 模式下的名字 (默认值：package.json 中的 "name" 字段或入口文件名)
  --no-clean    在构建项目之前不清除目标目录
  --report      生成 report.html 以帮助分析包内容
  --report-json 生成 report.json 以帮助分析包内容
  --watch       监听文件变化

 

编译好的文件没有任何.vue文件，只有css/html/js 还有图片，map文件等等。

vue-cli-service serve 会启动一个开发服务器（基于webpack-dev-server）并且附带了开箱即用的模块热重载

用法：vue-cli-service serve [options] [entry]
 
选项：
 
  --open    在服务器启动时打开浏览器
  --copy    在服务器启动时将 URL 复制到剪切版
  --mode    指定环境模式 (默认值：development)
  --host    指定 host (默认值：0.0.0.0)
  --port    指定 port (默认值：8080)
  --https   使用 https (默认值：false) 

除了通过命令行，可以使用vue.config.js中devServer字段配置开发服务器的参数；下面给出一段配置的例子：

devServer: {
    port: 8080,
    before(app) {
        if ('true' !== process.env.NO_MOCK) {
            apiMocker(app, path.resolve('./mocker/index.js'));
        }
    },
    disableHostCheck: true,
},