Перейти к основному содержимому

Vue — SSR, тесты и production

SSR и Nuxt​

Vue в браузере — клиентский рендер. Nuxt — meta-фреймворк: файловый роутинг, SSR/SSG, SEO.

Nuxt имеет смысл для публичных страниц с индексацией и когда важен первый экран без пустой разметки до загрузки JS. Для внутренней админки и учебного SPA на Vite обычно хватает клиентского рендера.

Тестирование​

УровеньИнструмент
UnitVitest
Компоненты@vue/test-utils
E2EPlaywright, Cypress
import { mount } from '@vue/test-utils';
import Counter from './Counter.vue';

test('increments', async () => {
  const wrapper = mount(Counter);
  await wrapper.find('button').trigger('click');
  expect(wrapper.text()).toContain('1');
});

Безопасность SPA​

  • не вставляйте непроверенный HTML (v-html только для доверенного контента);
  • токены — httpOnly cookie или заголовки, не localStorage для чувствительных сессий;
  • CSP на production.

Производительность​

  • ленивые маршруты: component: () => import('./views/Heavy.vue');
  • defineAsyncComponent для тяжёлых виджетов;
  • виртуализация длинных списков;
  • анализ bundle: vite build --report.

CI/CD​

Типичный pipeline:

npm ci
npm run lint
npm run test
npm run build

Артефакт dist/ → статический хостинг или Docker + Nginx.

Связанные материалы​

Содержание
Освоение главы0%