Vue 2 Framework Deployment and Usage Guide

⚠️ End of Life Notice: Vue 2 reached End of Life on December 31st, 2023. This repository no longer receives updates or security fixes. For new projects, use Vue 3. For continued security support on Vue 2, consider Vue 2 NES.

Prerequisites

Node.js: Version 12.x or higher (recommended: 14.x or 16.x for build compatibility)
Package Manager: npm (v6+) or Yarn (v1.22+)
Git: For cloning the repository
TypeScript: v4.x+ (if modifying source files in src/compiler/, src/core/, or packages/)

Installation

1. Clone the Repository

git clone https://github.com/vuejs/vue.git
cd vue

2. Install Dependencies

# Using npm
npm install

# Using Yarn
yarn install

This installs dependencies for the core framework and all sub-packages (packages/server-renderer, packages/compiler-sfc, etc.).

Configuration

Build Configuration

Create a .env file in the project root for custom build settings:

# Target environment (development | production)
NODE_ENV=production

# Enable source maps
SOURCE_MAP=true

# Build specific formats (UMD, ESM, CJS)
TARGET_FORMATS=umd,esm

TypeScript Configuration

The project uses tsconfig.json in the root. Key paths are pre-configured:

src/compiler/* - Template parser and code generator
src/core/* - Reactivity system and VDOM (virtual DOM patching in src/core/vdom/patch.ts)
packages/* - Server-side renderer and compiler utilities

Build & Run

Development Build

Build the framework with watch mode for development:

# Build all distributions (UMD, CommonJS, ES Modules)
npm run build

# Watch mode for development
npm run build:ssr -- --watch

Testing

Run the test suite across different environments:

# Run unit tests
npm test

# Run tests with coverage
npm run test:coverage

# Run e2e tests
npm run test:e2e

# Run SSR-specific tests
npm run test:ssr

Local Development Server

To test changes in a browser environment:

# Serve the dist files locally
npx serve dist/

# Or use the dev server for examples
cd examples
npm install
npm run dev

Building Specific Packages

The monorepo contains several packages in /packages:

# Build server-renderer specifically
npm run build:ssr

# Build compiler
npm run build:compiler

Deployment

NPM Publishing

To publish a custom build to npm (for forked versions):

# Version bump
npm version patch

# Publish to npm (requires authentication)
npm publish --access public

CDN Distribution

Vue 2 is available via CDN for direct browser usage:

<!-- Development version -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

<!-- Production version -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.min.js"></script>

Static Site Deployment

For applications built with Vue 2 (using the built framework):

Vercel/Netlify:

# Build for production
npm run build

# Deploy dist folder
vercel --prod dist/

Docker:

FROM nginx:alpine
COPY dist/ /usr/share/nginx/html
EXPOSE 80

Server-Side Rendering (SSR)

Deploy the server-renderer package (packages/server-renderer) for SSR:

# Build SSR bundle
npm run build:ssr

# Node.js server deployment
node server.js

Troubleshooting

Build Issues

Error: Cannot find module 'typescript'

npm install typescript --save-dev

Error: RollupError: Unexpected token in TypeScript files Ensure tsconfig.json is properly configured:

{
  "compilerOptions": {
    "target": "ES5",
    "module": "ES2015",
    "strict": true
  }
}

Runtime Errors

Error: You are using the runtime-only build of Vue Use the full build with compiler, or pre-compile templates:

// webpack.config.js
resolve: {
  alias: {
    'vue$': 'vue/dist/vue.esm.js'  // Full build with compiler
  }
}

Memory leaks in SSR Ensure serverPrefetch promises are properly handled in packages/server-renderer/src/render.ts:

// Always return promises in serverPrefetch
serverPrefetch() {
  return this.fetchData().catch(err => {
    console.error(err)
  })
}

Migration Issues

Upgrading from Vue 2.6 to 2.7 Vue 2.7 includes Composition API backported from Vue 3. Check for breaking changes in src/core/vdom/patch.ts if using custom render functions.

Vue 3 Migration Path For EOL compliance, migrate to Vue 3:

Use the Migration Build
Replace Vue.set/Vue.delete with native methods
Update template refs to new Composition API syntax

Security Considerations

Since Vue 2 is EOL:

XSS vulnerabilities: Sanitize HTML in templates using he (HTML entities) library shown in src/compiler/parser/index.ts
Dependency audits: Run npm audit regularly; consider vue2-nes for security patches
Server-Side Rendering: Validate all user input before passing to packages/server-renderer functions

How to Deploy & Use vuejs/vue