框架预设支持 #

框架自动检测 #

Netlify 能够自动识别主流前端框架，并应用最佳配置。

text

检测流程：
┌────────────┐    ┌────────────┐    ┌────────────┐
│ 分析项目文件 │ → │ 识别框架类型 │ → │ 应用预设配置 │
└────────────┘    └────────────┘    └────────────┘

React #

Create React App #

项目结构

text

my-react-app/
├── package.json
├── public/
│   └── index.html
└── src/
    └── App.js

netlify.toml

toml

[build]
  command = "npm run build"
  publish = "build"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

环境变量

bash

# .env.production
REACT_APP_API_URL=https://api.example.com

Vite + React #

netlify.toml

toml

[build]
  command = "npm run build"
  publish = "dist"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

环境变量

bash

# .env.production
VITE_API_URL=https://api.example.com

Vue #

Vue CLI #

netlify.toml

toml

[build]
  command = "npm run build"
  publish = "dist"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

Vite + Vue #

netlify.toml

toml

[build]
  command = "npm run build"
  publish = "dist"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

Nuxt.js #

netlify.toml

toml

[build]
  command = "npm run generate"
  publish = "dist"

nuxt.config.js

javascript

export default {
  target: 'static',
  generate: {
    fallback: true
  }
}

Next.js #

静态导出 #

next.config.js

javascript

module.exports = {
  output: 'export',
  trailingSlash: true
}

netlify.toml

toml

[build]
  command = "npm run build"
  publish = "out"

使用 Netlify 插件（推荐） #

bash

npm install @netlify/plugin-nextjs

netlify.toml

toml

[build]
  command = "npm run build"
  publish = ".next"

[[plugins]]
  package = "@netlify/plugin-nextjs"

Next.js 功能支持 #

功能	支持方式
SSG	原生支持
SSR	Netlify Functions
ISR	Netlify Functions
API Routes	Netlify Functions
Image Optimization	Netlify Image CDN

Angular #

netlify.toml

toml

[build]
  command = "ng build --configuration production"
  publish = "dist/my-app"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

angular.json 配置

json

{
  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "configurations": {
            "production": {
              "outputPath": "dist/my-app"
            }
          }
        }
      }
    }
  }
}

Svelte / SvelteKit #

Svelte (Vite) #

netlify.toml

toml

[build]
  command = "npm run build"
  publish = "dist"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

SvelteKit #

svelte.config.js

javascript

import adapter from '@sveltejs/adapter-static';

export default {
  kit: {
    adapter: adapter({
      pages: 'build',
      assets: 'build',
      fallback: 'index.html'
    })
  }
}

netlify.toml

toml

[build]
  command = "npm run build"
  publish = "build"

Astro #

netlify.toml

toml

[build]
  command = "npm run build"
  publish = "dist"

astro.config.mjs

javascript

import { defineConfig } from 'astro/config';

export default defineConfig({
  output: 'static'
});

Astro + SSR #

astro.config.mjs

javascript

import { defineConfig } from 'astro/config';
import netlify from '@astrojs/netlify';

export default defineConfig({
  output: 'server',
  adapter: netlify()
});

netlify.toml

toml

[build]
  command = "npm run build"
  publish = "dist"

Hugo #

netlify.toml

toml

[build]
  command = "hugo --gc --minify"
  publish = "public"

[build.environment]
  HUGO_VERSION = "0.120.0"

config.toml

toml

baseURL = "https://example.com/"
languageCode = "zh-cn"
title = "My Hugo Site"

Hugo 版本管理 #

toml

[build.environment]
  HUGO_VERSION = "0.120.0"
  HUGO_ENV = "production"

Hexo #

netlify.toml

toml

[build]
  command = "hexo generate"
  publish = "public"

[build.environment]
  NODE_VERSION = "18"

_config.yml

yaml

url: https://example.com
root: /

Gatsby #

netlify.toml

toml

[build]
  command = "gatsby build"
  publish = "public"

[build.environment]
  NODE_VERSION = "18"

Gatsby 插件 #

bash

npm install gatsby-plugin-netlify

gatsby-config.js

javascript

module.exports = {
  plugins: [
    'gatsby-plugin-netlify'
  ]
}

Jekyll #

netlify.toml

toml

[build]
  command = "jekyll build"
  publish = "_site"

[build.environment]
  RUBY_VERSION = "3.2"

Gemfile

ruby

source "https://rubygems.org"
gem "jekyll"

Docsify #

netlify.toml

toml

[build]
  command = "echo 'No build needed'"
  publish = "."

index.html

html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>My Docs</title>
  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/vue.css">
</head>
<body>
  <div id="app"></div>
  <script>
    window.$docsify = {
      name: 'My Docs',
      repo: 'username/repo'
    }
  </script>
  <script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
</body>
</html>

框架配置速查表 #

框架	Build Command	Publish	特殊配置
React (CRA)	`npm run build`	`build`	SPA 重定向
React (Vite)	`npm run build`	`dist`	SPA 重定向
Vue (Vite)	`npm run build`	`dist`	SPA 重定向
Nuxt.js	`npm run generate`	`dist`	target: static
Next.js	`npm run build`	`.next`	插件支持
Angular	`ng build`	`dist/app`	SPA 重定向
SvelteKit	`npm run build`	`build`	adapter-static
Astro	`npm run build`	`dist`	-
Hugo	`hugo`	`public`	HUGO_VERSION
Hexo	`hexo generate`	`public`	-
Gatsby	`gatsby build`	`public`	插件推荐
Jekyll	`jekyll build`	`_site`	RUBY_VERSION

SPA 路由配置 #

所有单页应用（SPA）都需要配置路由重定向：

toml

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

排除静态资源 #

toml

[[redirects]]
  from = "/assets/*"
  to = "/assets/:splat"
  status = 200

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

多框架项目 #

Monorepo 支持 #

text

monorepo/
├── packages/
│   ├── web/
│   └── docs/
├── package.json
└── netlify.toml

netlify.toml

toml

[build]
  command = "npm run build:web"
  publish = "packages/web/dist"

多站点部署 #

每个子项目可以单独部署为一个 Netlify 站点。

下一步 #

了解了框架预设后，继续学习环境变量管理掌握敏感信息的配置！