vue-cli-service--使用/教程

原文网址：vue-cli-service--使用/教程_IT利刃出鞘的博客-CSDN博客

简介

说明

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

用法

用法：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

说明

        作用简述：打包。

        vue-cli-service build 会在 dist/ 目录生成一个可用于生产环境的包。

打包的特点

1. 压缩JS/CSS/HTML
2. 自动的 vendor chunk splitting
   1. 这样可以更好地缓存。
3. chunk manifest 会内联在 HTML 里。

用法

用法：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--跨域_IT利刃出鞘的博客-CSDN博客

简介

 跟webpack-dev-server一样用（除了配置位置不一样以外）。