[Vue] Introdução detalhada ao processo de implantação do Vue-cli

Vue-cli é uma ferramenta de scaffolding que pode nos ajudar a gerar rapidamente modelos de projetos Vue e fornece algumas configurações e plug-ins comumente usados. Vue-cli fornece uma variedade de maneiras de implantar aplicativos Vue. Os dois métodos comumente usados ​​a seguir são apresentados em detalhes.

Método 1: implantar nas páginas do GitHub

1. Crie um projeto Vue

Primeiro instale a ferramenta de andaime Vue-cli:

npm install -g vue-cli

Em seguida, crie um projeto Vue:

vue create my-project

2. Configure o projeto Vue

Crie o arquivo vue.config.js no diretório src e adicione a seguinte configuração:

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/my-project/'
    : '/'
}

Entre eles, publicPathrepresenta o caminho URL básico do projeto. Se o seu projeto for colocado em seu próprio servidor, você pode definir o valor como /. Se desejar implantar seu projeto no GitHub Pages, você precisa definir o valor como /my-project/, onde my-projecté o nome do seu repositório GitHub Pages.

3. Compilar e empacotar

Use o seguinte comando para compilar e empacotar:

npm run build

Após a conclusão da compilação, um diretório dist será gerado no diretório raiz do projeto, que contém todos os arquivos que precisam ser implantados.

4. Implante nas páginas do GitHub

Carregue todos os arquivos no diretório dist para a ramificação do warehouse do GitHub Pages gh-pages(se não houver tal ramificação, você precisará criá-la) e, em seguida, habilite o serviço GitHub Pages nas configurações do warehouse.

Após concluir as etapas acima, você poderá https://<username>.github.io/my-project/acessar seu aplicativo Vue através do access.

Método 2: implantar usando Firebase

Firebase é uma plataforma de serviço em nuvem fornecida pelo Google que pode criar e implantar aplicativos da web rapidamente e fornecer serviços de hospedagem gratuitos.

1. Crie um projeto Vue

O mesmo que o método um.

2. Configure o projeto Vue

Crie o arquivo vue.config.js no diretório src e adicione a seguinte configuração:

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/'
    : '/'
}

3. Instale e inicialize o Firebase

Instale a CLI do Firebase:

npm install -g firebase-tools

Inicialize o Firebase com o seguinte comando:

firebase login
firebase init

Durante o processo de inicialização, você precisa configurar algumas opções, como escolher em qual projeto do Firebase implantar, selecionar a pasta a ser implantada, configurar a implantação automática, etc.

4. Compilar e empacotar

Use o seguinte comando para compilar e empacotar:

npm run build

5. Implante no Firebase

Use o seguinte comando para implantar:

firebase deploy

Após a conclusão da implantação, você poderá ver o link para seu aplicativo Web no console do Firebase ou poderá vincular você mesmo um nome de domínio personalizado.

Acima estão duas maneiras comumente usadas para implantar aplicativos Vue com Vue-cli. Qual método escolher depende da situação e das necessidades reais.