Vue CLI配置指南（6）构建目标 vue-cli-service build & 部署

构建目标

当你运行 vue-cli-service build 时，你可以通过 --target 选项指定不同的构建目标:它允许你将相同的源代码根据不同的用例生成不同的构建。

1.应用

应用模式是默认的模式。在这个模式中：

• index.html 会带有注入的资源和 resource hint
• 第三方库会被分到一个独立包以便更好的缓存
• 小于4kb的静态资源会被内联在 JavaScript 中
• public 中的静态资源会被复制到输出目录中

2.库

用的不多，就不列举了。详细看官方文档：https://cli.vuejs.org/zh/guide/build-targets.html

3.Web Components 组件

同上。

部署

通用指南

如果你用 Vue CLI 处理静态资源并和后端框架一起作为部署的一部分，那么你需要的仅仅是确保 Vue CLI 生成的构建文件在正确的位置，并遵循后端框架的发布方式即可。

如果你独立于后端部署前端应用——也就是说后端暴露一个前端可访问的 API，然后前端实际上是纯静态应用。那么你可以将 dist 目录里构建的内容部署到任何静态文件服务器中，但要确保正确的 publicPath。

本地预览

dist 目录需要启动一个 HTTP 服务器来访问 (除非你已经将 publicPath 配置为了一个相对的值)，所以以 file:// 协议直接打开 dist/index.html 是不会工作的。在本地预览生产环境构建最简单的方式就是使用一个 Node.js 静态文件服务器，例如 serve：

npm install -g serve
# -s 参数的意思是将其架设在 Single-Page Application 模式下
# 这个模式会处理即将提到的路由问题
serve -s dist

使用 history.pushState 的路由

如果你在 history 模式下使用 Vue Router，是无法搭配简单的静态文件服务器的。例如，如果你使用 Vue Router 为 /todos/42/ 定义了一个路由，开发服务器已经配置了相应的 localhost:3000/todos/42 响应，但是一个为生产环境构建架设的简单的静态服务器会却会返回 404。

为了解决这个问题，你需要配置生产环境服务器，将任何没有匹配到静态文件的请求回退到 index.html。Vue Router 的文档提供了常用服务器配置指引。

#CORS
如果前端静态内容是部署在与后端 API 不同的域名上，你需要适当地配置 CORS。

#PWA
如果你使用了 PWA 插件，那么应用必须架设在 HTTPS 上，这样 Service Worker 才能被正确注册。