chatgpt在线和本地部署区别 部署静态站点 #

部署静态站点

本指南建立在以下几个假设基础之上：

json

{
  "scripts": {
    "build": "vite build",
    "preview": "vite preview"
  }
}

值得注意的是 vite 用作预览本地构建，而不应直接作为生产服务器。

注意

本篇指南提供了部署 Vite 静态站点的说明。Vite 也对服务端渲染（SSR）有了实验性的支持。SSR 是指支持在 Node 中运行相应应用的前端框架，预渲染成 HTML，最后在客户端激活（）。查看 SSR 指南 了解更多细节。另一方面，如果你在寻找与传统服务端框架集成的方式，那么请查看 后端集成 章节。

构建应用

你可以运行 npm run build 命令来执行应用的构建。

bash

$ npm run build

默认情况下，构建会输出到 dist 文件夹中。你可以部署这个 dist 文件夹到任何你喜欢的平台。

本地测试应用

当你构建完成应用后，你可以通过运行 npm run 命令，在本地测试该应用。

bash

$ npm run build
$ npm run preview

vite 命令会在本地启动一个静态 Web 服务器，将 dist 文件夹运行在 :4173。这样在本地环境下查看该构建产物是否正常可用就方便多了。

你可以通过 –port 参数来配置服务的运行端口。

json

{
  "scripts": {
    "preview": "vite preview --port 8080"
  }
}

现在 命令会将服务器运行在 :8080。

Pages

在 vite..js 中设置正确的 base。

如果你要部署在 ..io/ 上，你可以省略 base 使其默认为 ‘/’。

如果你要部署在 ..io// 上，例如你的仓库地址为 /，那么请设置 base 为 ‘//’。

进入仓库 页面的 Pages 配置，选择部署来源为“ ”，这将引导你创建一个构建和部署项目的工作流程，我们提供了一个安装依赖项和使用 npm 构建的工作流程样本：

yml

# 将静态内容部署到 GitHub Pages 的简易工作流程
name: Deploy static content to Pages

on:
  # 仅在推送到默认分支时运行。
  push:
    branches: ['main']

  # 这个选项可以使你手动在 Action tab 页面触发工作流
  workflow_dispatch:

# 设置 GITHUB_TOKEN 的权限，以允许部署到 GitHub Pages。
permissions:
  contents: read
  pages: write
  id-token: write

# 允许一个并发的部署
concurrency:
  group: 'pages'
  cancel-in-progress: true

jobs:
  # 单次部署的工作描述
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v3
      - name: Set up Node
        uses: actions/setup-node@v3
        with:
          node-version: 18
          cache: 'npm'
      - name: Install dependencies
        run: npm install
      - name: Build
        run: npm run build
      - name: Setup Pages
        uses: actions/configure-pages@v3
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v1
        with:
          # Upload dist repository
          path: './dist'
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v1

Pages 配合 CI

在 vite..js 中设置正确的 base。

如果你要部署在 ..io/ 上，你可以省略 base 使其默认为 ‘/’。

如果你要部署在 ..io// 上，例如你的仓库地址为 /，那么请设置 base 为 ‘//’。

在项目根目录创建一个 .-ci.yml 文件，并包含以下内容。它将使得每次你更改内容时都重新构建与部署站点：

yaml

image: node:16.5.0
pages:
  stage: deploy
  cache:
    key:
      files:
        - package-lock.json
      prefix: npm
    paths:
      - node_modules/
  script:
    - npm install
    - npm run build
    - cp -a dist/. public/
  artifacts:
    paths:
      - public
  rules:
    - if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH

CLI 安装 CLI。使用 ntl init 创建一个新站点。使用 ntl 来部署。

bash

# 安装 Netlify CLI
$ npm install -g netlify-cli

# 在 Netlify 中创建一个新站点
$ ntl init

# 部署一个独一无二的预览 URL
$ ntl deploy

CLI 会给你分享一个预览的 URL 来检查部署结果。当你准备好了发布生产版本时，请使用 prod 标志：

bash

# 部署站点到生产环境
$ ntl deploy --prod

with Git 将你的代码推送到 git 仓库（、、 或是 Azure 等服务）在 中 导入该项目选择分支，输出目录，如果需要还可以设置环境变量。点击 部署你的 Vite 应用就部署完成了！

在你的项目被导入和部署后，所有对生产分支以外的其他分支（可能来自合并请求）的后续推送都会生成 预览部署，所有对生产分支（通常是 “main”）都会生成一个 。

CLI 安装 CLI 并运行 来部署。 会检测到你正在使用 Vite，并会为你开启相应的正确配置。你的应用被部署好了！（示例：vite-vue-..app）

bash

$ npm i -g vercel
$ vercel init vite
Vercel CLI
> Success! Initialized "vite" example in ~/your-folder.
- To deploy, `cd vite` and run `vercel`.

for Git 将你的代码推送到远程仓库（, , ）导入你的 Vite 仓库 到 会检测到你正在使用 Vite，并会为你的部署开启相应的正确配置。你的应用被部署好了！（示例：vite-vue-..app）

在你的项目被导入和部署后，所有对分支的后续推送都会生成 ，而所有对生产分支（通常是“main”）的更改都会生成一个