Vite

Português

English
简体中文
日本語
Español
한국어
Deutsch

Português

English
简体中文
日本語
Español
한국어
Deutsch

Appearance

Para Além da Rapidez

ViteConf 2023

Assistir a repetição!

Implementando uma Aplicação Estática ​

As seguintes orientações são baseadas nalgumas suposições partilhadas:

  • Nós estamos usando a localização da saída da construção padrão (dist). Esta localização pode ser mudada usando build.outDir, e podemos extrapolar as instruções a partir destas orientações neste caso.
  • Nós estamos usando o npm. Nós podemos usar os comandos equivalentes para executar os programas se estivermos usando Yarn ou outros gestores de pacote.
  • A Vite é instalada como uma dependência local no nosso projeto, e temos configurado os seguintes programas de npm:
json
{
  "scripts": {
    "build": "vite build",
    "preview": "vite preview"
  }
}
{
  "scripts": {
    "build": "vite build",
    "preview": "vite preview"
  }
}

É importante notar que o comando vite preview está destinado para pré-visualizar a construção localmente e não está destinado a servir como um servidor de produção.

NOTA

Estas orientações fornecem instruções para realizar uma implementação estática da nossa aplicação de Vite. A Vite também suporta interpretação do lado do servidor. A interpretação do lado do servidor refere-se às abstrações de front-end que suportam executar a mesma aplicação na Node.js, pré-interpretando-a à HTML, e finalmente hidratando-a no cliente. Consulte o Guia da Interpretação do Lado do Cliente para aprender sobre esta funcionalidade. Por outro lado, se estivermos procurando pela integração com as abstrações do lado do servidor tradicionais, devemos consultar o Guia da Integração do Backend.

Construindo a Aplicação ​

Nós podemos executar o comando npm run build para construir a aplicação:

bash
$ npm run build
$ npm run build

Por padrão, a saída da construção será colocada no diretório dist. Nós podemos servir esta pasta dist em produção em quaisquer plataformas de nossa preferência.

Testando a Aplicação Localmente ​

Assim que construirmos a aplicação, podemos testá-la localmente executando o comando npm run preview:

bash
$ npm run build
$ npm run preview
$ npm run build
$ npm run preview

O comando vite preview iniciará um servidor da Web estático localmente que serve os ficheiros do diretório dist na http://localhost:4173. É uma maneira fácil de verificar se a construção de produção funciona corretamente no nosso ambiente local.

Nós podemos configurar a porta do servidor passando a opção --port como argumento:

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

Agora o comando preview lançará o servidor na http://localhost:8080.

GitHub Pages ​

  1. Definimos a base correta no vite.config.js.

    Se estivermos implementando na https://<USERNAME>.github.io/, ou num domínio personalizado através da GitHub Pages (por exemplo, www.example.com), definimos a base para '/'. Alternativamente, podemos remover base da configuração, já que esta predefine para '/'.

    Se estivermos implementando na https://<USERNAME>.github.io/<REPO>/ (por exemplo, o nosso repositório está em https://github.com/<USERNAME>/<REPO>), então definimos a base para '/<REPO>/'.

  2. Vamos para a configuração da nossa GitHub Pages na página de definições (ou configurações) do repositório e escolhemos a fonte da implementação como "GitHub Actions", isto levar-nos-á à criar um fluxo de trabalho que constrói e implementa o nosso projeto, um fluxo de trabalho de exemplo que instala as dependências e constrói o projeto usando o npm é fornecido:

    yml
    # Fluxo de trabalho simples para implementar
# conteúdo estático na GitHub Pages
name: Deploy static content to Pages

on:
  # Executa sobre as atualizações mirando o ramo padrão
  push:
    branches: ['main']

  # Permite-nos executar este fluxo de trabalho manualmente
  # a partir da aba de Ações (ou `Actions`)
  workflow_dispatch:

# Define as permissões do GITHUB_TOKEN para permitir
# a implementação na GitHub Pages
permissions:
  contents: read
  pages: write
  id-token: write

# Permitir uma implementação simultânea
concurrency:
  group: 'pages'
  cancel-in-progress: true

jobs:
  # Único trabalho de implementação
  # uma vez que apenas estamos implementando
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - 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@v2
        with:
          # Carregar o repositório de distribuição
          path: './dist'
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v2
    # Fluxo de trabalho simples para implementar
# conteúdo estático na GitHub Pages
name: Deploy static content to Pages

on:
  # Executa sobre as atualizações mirando o ramo padrão
  push:
    branches: ['main']

  # Permite-nos executar este fluxo de trabalho manualmente
  # a partir da aba de Ações (ou `Actions`)
  workflow_dispatch:

# Define as permissões do GITHUB_TOKEN para permitir
# a implementação na GitHub Pages
permissions:
  contents: read
  pages: write
  id-token: write

# Permitir uma implementação simultânea
concurrency:
  group: 'pages'
  cancel-in-progress: true

jobs:
  # Único trabalho de implementação
  # uma vez que apenas estamos implementando
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - 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@v2
        with:
          # Carregar o repositório de distribuição
          path: './dist'
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v2

GitLab Pages e GitLab CI ​

  1. Definimos a base correta no vite.config.js.

    Se estivermos implementando na https://<USERNAME or GROUP>.gitlab.io/, podemos omitir a base, já que esta predefine para '/'.

    Se estivermos implementando na https://<USERNAME or GROUP>.gitlab.io/<REPO>/, por exemplo o nosso repositório está em https://gitlab.com/<USERNAME>/<REPO>, então definimos a base para '/<REPO>/'.

  2. Críamos um ficheiro chamado .gitlab-ci.yml na raiz do nosso projeto com o conteúdo abaixo. Isto construirá e implementará a nossa aplicação sempre que fizermos mudanças no nosso conteúdo:

    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
    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

Netlify ​

Netlify CLI ​

  1. Instalamos a Interface da Linha de Comando da Netlify.
  2. Críamos uma nova aplicação usando ntl init.
  3. Implementamos usando ntl deploy:
bash
# Instalar a Interface da Linha de Comando da Netlify
$ npm install -g netlify-cli

# Criar uma nova aplicação na Netlify
$ ntl init

# Implementar numa única URL de pré-visualização
$ ntl deploy
# Instalar a Interface da Linha de Comando da Netlify
$ npm install -g netlify-cli

# Criar uma nova aplicação na Netlify
$ ntl init

# Implementar numa única URL de pré-visualização
$ ntl deploy

A interface da linha de comando da Netlify partilhará connosco uma URL de pré-visualização para inspecionar. Quando estivermos pronto para avançarmos para produção, usamos a opção prod:

bash
# Implementar a aplicação em produção
$ ntl deploy --prod
# Implementar a aplicação em produção
$ ntl deploy --prod

Netlify com a Git ​

  1. A tua aplicação de Vite está desdobrada!
  2. Empurramos o nosso código para um repositório de Git (GitHub, GitLab, BitBucket, Azure DevOps).
  3. Importamos o projeto na Netlify.
  4. Escolhemos o ramo, diretório de saída, e definimos as variáveis de ambiente se aplicável.
  5. Clicamos sobre Implementar (ou Deploy)

Depois do nosso projeto ter sido importado e implementado, todas as atualizações (ou pushes) subsequentes aos outros ramos que não são o de produção juntamente com os pedidos de atualização (ou pull requests) gerarão as implementações de pré-visualização, e todas as mudanças feitas ao ramo de produção (comummente “main”) resultarão numa implementação de produção.

Vercel ​

Vercel CLI ​

  1. Instalamos a Interface da Linha de Comando da Vercel e executamos vercel para implementar.
  2. A Vercel detetará que estamos usando a Vite e ativará as definições (ou configurações) corretas para a nossa implementação.
  3. A aplicação está implementada! (por exemplo, vite-vue-template.vercel.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`.
$ npm i -g vercel
$ vercel init vite
Vercel CLI
> Success! Initialized "vite" example in ~/your-folder.
- To deploy, `cd vite` and run `vercel`.

Vercel com a Git ​

  1. Empurramos o nosso código ao nosso repositório de Git (GitHub, GitLab, BitBucket).
  2. Importamos o nosso projeto de Vite na Vercel.
  3. A Vercel detetará que estamos usando a Vite e ativará as definições (ou configurações) corretas para a nossa implementação
  4. A nossa aplicação está implementada! (por exemplo, vite-vue-template.vercel.app)

Depois do nosso projeto ter sido importado e implementado, todas as atualizações subsequentes (ou pushes) aos ramos gerarão implementações de pré-visualização, e todas as mudanças feitas ao ramo de produção (comummente “main”) resultarão numa implementação de produção.

Aprenda mais a respeito da Integração de Git da Vercel.

Cloudflare Pages ​

Cloudflare Pages através da Wrangler ​

  1. Instalamos a Interface da Linha de Comando da Wrangler.
  2. Autenticamos a Wrangler com a nossa conta da Cloudflare usando wrangler login.
  3. Executamos o nosso comando de construção.
  4. Implementamos usando npx wrangler pages deploy dist.
bash
# Instalar a interface da linha de comando da Wrangler
$ npm install -g wrangler

# Iniciar sessão da conta da Cloudflare
# a partir da interface da linha de comando
$ wrangler login

# Executar o nosso comando de construção
$ npm run build

# Criar nova implementação
$ npx wrangler pages deploy dist
# Instalar a interface da linha de comando da Wrangler
$ npm install -g wrangler

# Iniciar sessão da conta da Cloudflare
# a partir da interface da linha de comando
$ wrangler login

# Executar o nosso comando de construção
$ npm run build

# Criar nova implementação
$ npx wrangler pages deploy dist

Depois dos nossos recursos estiverem carregados, a Wrangler dar-nos-á uma URL de pré-visualização para inspecionar a nossa aplicação. Quando entrarmos no painel de controlo da Cloudflare Pages, veremos o nosso novo projeto.

Cloudflare Pages com a Git ​

  1. Empurramos o nosso código ao nosso repositório (GitHub, GitLab).
  2. Entramos no painel de controlo da Cloudflare e selecionamos a nossa conta em Página Inicial da Conta (ou Account Home) > Páginas (ou Pages).
  3. Selecionamos Criar um novo Projeto (ou Create a new Project) e a opção Conectar Git (ou Connect Git).
  4. Selecionamos o projeto de Git que queremos implementar e clicamos em Iniciar configuração (ou Begin setup).
  5. Selecionamos pré-definição (ou pré-configuração) da abstração correspondente nas definições (ou configurações) de construção dependendo da abstração de Vite que selecionamos.
  6. Depois guardamos e implementamos!
  7. A nossa aplicação está implementada! (por exemplo, https://<PROJECTNAME>.pages.dev/)

Depois do nosso projeto ter sido importado e implementado, todas as atualizações subsequentes (pushes) aos ramos gerarão implementações de pré-visualização a menos que seja especificado para não o fazer nos nossos controlos de construção do ramo. Todas as mudanças ao ramo de produção (comummente “main”) resultarão numa implementação de produção.

Nós também podemos adicionar domínios personalizados e manipular as definições (ou configurações) na Pages. Saiba mais sobre a Integração de Git da Cloudflare Pages.

Google Firebase ​

  1. Certificamos-nos de que temos a firebase-tools instalada.

  2. Críamos o firebase.json e o .firebaserc na raiz do nosso projeto com o seguinte conteúdo:

    firebase.json:

    json
    {
  "hosting": {
    "public": "dist",
    "ignore": [],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}
    {
  "hosting": {
    "public": "dist",
    "ignore": [],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

    .firebaserc:

    js
    {
  "projects": {
    "default": "<YOUR_FIREBASE_ID>"
  }
}
    {
  "projects": {
    "default": "<YOUR_FIREBASE_ID>"
  }
}

  3. Depois de executarmos npm run build, implementamos usando o comando firebase deploy.

Surge ​

  1. Instalamos a surge, se já não estiver instalada.

  2. Executamos npm run build.

  3. Implementamos à surge digitando surge dist.

Nós também podemos implementar para um domínio personalizado adicionando surge dist yourdomain.com.

Azure Static Web Apps ​

Nós podemos implementar rapidamente a nossa aplicação de Vite com o serviço de Aplicações da Web Estáticas da Microsoft Azure. Nós precisamos:

Instalamos a extensão no VS Code e navegamos à raiz da nossa aplicação. Abrimos a extensão Static Web Apps, iniciamos a sessão na Azure, clicamos no sinal de '+' para criar uma nova Aplicação de Web Estática. Ser-nos-á pedido que designemos a chave de subscrição a usar.

Seguimos o assistente (ou wizard ou feiticeiro se preferirmos) iniciado pela extensão para darmos um nome à nossa aplicação, escolhemos uma pré-definição (ou pré-configuração) de abstração, e designamos a raiz da aplicação (normalmente /) e a localização do ficheiro construído /dist. O assistente executará e criará uma ação de GitHub no nosso repositório numa pasta .github.

A ação trabalhará para implementar a nossa aplicação (observamos o seu progresso na aba Ações (ou Actions)) e, quando concluída com sucesso, podemos visualizar a nossa aplicação no endereço fornecido na janela de progresso da extensão clicando no botão 'Olhar Aplicação' (ou 'Browse Website') que aparece quando a ação de GitHub é executada.

Render ​

Nós podemos implementar a nossa aplicação de Vite como uma Aplicação Estática na Render:

  1. Críamos uma conta da Render.

  2. No painel de controlo, clicamos no botão Novo (ou New) e selecionamos Aplicação Estática (ou Static Site).

  3. Conectamos a nossa conta da GitHub ou GitLab, ou usamos um repositório público.

  4. Especificamos um nome de projeto e o ramo:

    • Comando de Construção (ou Build Command): npm run build
    • Diretório de Publicação (Publish Directory): dist

  5. Clicamos em Criar Aplicação Estática (Create Static Site):

    A nossa aplicação deve ser implementada na https://<PROJECTNAME>.onrender.com/.

Por padrão, qualquer nova atualização empurrada ao ramo especificado acionará automaticamente uma nova implementação. A Implementação Automática (ou Auto-Deploy) pode ser configurada nas definições (ou configurações) deo projeto.

Nós também podemos adicionar um domínio personalizado ao nosso projeto.

Flightcontrol ​

Implementamos a nossa aplicação estática usando a Flightcontrol, seguindo estas instruções.

Hospedagem da AWS Amplify ​

Implementamos a nossa aplicação estática usando a Hospedagem da AWS Amplify, seguindo estas instruções.

Hospedagem de Aplicação Estática da Kinsta ​

Nós podemos implementar a nossa aplicação de Vite como uma Aplicação Estática na Kinsta seguindo estas instruções.

Lançada sob a Licença MIT. (80292528)

Direitos de Autor © 2019-present Evan You & Colaboradores da Vite