生产部署

开发环境 vs. 生产环境

在开发过程中，Vue 提供了许多功能来提升开发体验：

对常见错误和陷阱的警告
对组件 props / 事件的校验
响应性调试钩子
开发工具支持

然而，这些功能在生产环境中并无用处，还会增加应用的体积。此外，某些错误检查代码的运行时开销在生产环境中是可以避免的。

不使用构建工具

如果你没有使用任何构建工具，而是从 CDN 或其他源来加载 Vue，请确保在生产环境中使用的是生产版本 (以 .prod.js 结尾的构建文件)。生产版本会被最小化，并移除了所有仅用于开发环境的警告。

如果需要使用全局构建版本 (通过 Vue 全局变量访问)：请使用 vue.global.prod.js。
如果需要使用 ESM 构建版本 (通过原生 ESM 导入访问)：请使用 vue.esm-browser.prod.js。

更多细节请查阅构建文件指南。

使用构建工具

通过 create-vue (基于 Vite) 或 Vue CLI (基于 webpack) 搭建的项目都已经为生产环境构建做好了预配置。

如果使用了自定义构建配置，请确保：

vue 被解析为 vue/dist/vue.runtime.esm-bundler.js。
编译时功能标记被正确配置。
process.env.NODE_ENV 在构建时被替换为 "production"。

更多参考：

追踪运行时错误

应用级错误处理可以用来向追踪服务报告错误：

import { createApp } from 'vue'

const app = createApp(...)

app.config.errorHandler = (err, instance, info) => {
  // 向追踪服务报告错误
}

诸如 Sentry 和 Bugsnag 等服务也为 Vue 提供了官方集成。

静态资源处理

预加载指令

对于大型应用，我们可能需要将应用拆分为多个较小的块，并仅在需要时从服务器加载相应的组件。为了优化首屏加载时间，通常建议预加载关键路由的组件。

在 Vue 3 中，可以使用 defineAsyncComponent API 来实现组件的异步加载：

import { defineAsyncComponent } from 'vue'

const AsyncComp = defineAsyncComponent(() =>
  import('./components/AsyncComponent.vue')
)

静态资源优化

图片优化：使用现代图片格式 (WebP, AVIF)，并提供回退方案
字体优化：使用 font-display: swap 来避免字体加载阻塞渲染
CSS 优化：移除未使用的 CSS，使用 CSS 压缩
JavaScript 优化：代码分割、Tree-shaking、压缩

服务端渲染 (SSR)

如果你的应用对 SEO 或首屏加载时间有较高要求，可以考虑使用服务端渲染。Vue 提供了官方的 SSR 解决方案：

Nuxt.js：基于 Vue 的全栈框架，提供开箱即用的 SSR 支持
Quasar：基于 Vue 的跨平台框架，支持 SSR
自定义 SSR：使用 @vue/server-renderer 构建自定义 SSR 解决方案

更多信息请参考 SSR 指南。

性能监控

Core Web Vitals

监控关键的性能指标：

LCP (Largest Contentful Paint)：最大内容绘制时间
FID (First Input Delay)：首次输入延迟
CLS (Cumulative Layout Shift)：累积布局偏移

性能监控工具

Google Analytics：网站分析和性能监控
Google PageSpeed Insights：页面速度分析
Lighthouse：网站质量审计工具
WebPageTest：网站性能测试工具

Vue 特定的性能监控

import { createApp } from 'vue'

const app = createApp(...)

// 性能追踪
app.config.performance = true

// 自定义性能监控
app.mixin({
  beforeCreate() {
    this.$options._startTime = performance.now()
  },
  mounted() {
    const endTime = performance.now()
    const duration = endTime - this.$options._startTime
    console.log(`Component ${this.$options.name} took ${duration}ms to mount`)
  }
})

安全考虑

XSS 防护

Vue 默认会对插值进行 HTML 转义，但在使用 v-html 时需要特别小心：

template

<!-- 安全：会被转义 -->
<div>{{ userInput }}</div>

<!-- 危险：可能导致 XSS -->
<div v-html="userInput"></div>

<!-- 安全：使用 DOMPurify 清理 -->
<div v-html="$sanitize(userInput)"></div>

CSP (Content Security Policy)

配置适当的 CSP 头来防止 XSS 攻击：

html

<meta http-equiv="Content-Security-Policy" 
      content="default-src 'self'; script-src 'self' 'unsafe-eval'; style-src 'self' 'unsafe-inline';">

注意：如果使用了内联模板或样式，可能需要调整 CSP 策略。

部署策略

静态部署

对于纯前端应用，可以部署到静态托管服务：

Netlify：自动部署、CDN、表单处理
Vercel：零配置部署、边缘函数
GitHub Pages：免费静态托管
AWS S3 + CloudFront：可扩展的静态托管

服务器部署

对于需要服务端功能的应用：

Node.js 服务器：Express、Koa、Fastify
容器化部署：Docker、Kubernetes
云平台：AWS、Google Cloud、Azure
CDN 配置：缓存策略、压缩、HTTP/2

部署检查清单

[ ] 生产环境构建已启用
[ ] 静态资源已优化 (压缩、缓存)
[ ] HTTPS 已配置
[ ] 错误监控已设置
[ ] 性能监控已配置
[ ] 备份策略已制定
[ ] 回滚计划已准备
[ ] 健康检查已配置

缓存策略

浏览器缓存

配置适当的 HTTP 缓存头：

nginx

# 静态资源长期缓存
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
}

# HTML 文件不缓存
location ~* \.html$ {
    expires -1;
    add_header Cache-Control "no-cache, no-store, must-revalidate";
}

CDN 缓存

使用版本化的文件名 (如 app.abc123.js)
配置适当的缓存失效策略
监控 CDN 性能和命中率

应用级缓存

// 使用 keep-alive 缓存组件
<keep-alive>
  <component :is="currentComponent" />
</keep-alive>

// 缓存计算属性
computed: {
  expensiveValue() {
    // 这个值会被缓存，直到依赖发生变化
    return this.someExpensiveOperation()
  }
}

通过遵循这些最佳实践，你可以确保 Vue 应用在生产环境中具有最佳的性能、安全性和可维护性。

生产部署 ​

开发环境 vs. 生产环境 ​

不使用构建工具 ​

使用构建工具 ​

追踪运行时错误 ​

静态资源处理 ​

预加载指令 ​

静态资源优化 ​

服务端渲染 (SSR) ​

性能监控 ​

Core Web Vitals ​

性能监控工具 ​

Vue 特定的性能监控 ​

安全考虑 ​

XSS 防护 ​

CSP (Content Security Policy) ​

部署策略 ​

静态部署 ​

服务器部署 ​

部署检查清单 ​

缓存策略 ​

浏览器缓存 ​

CDN 缓存 ​

应用级缓存 ​