O que devo fazer depois de desenvolver um aplicativo Vuevue-cli ?

No Angular, havia algum comando que agrupava todos os scripts em um único script e esses arquivos são enviados para o host.

Existe algo igual no Vue ?

Eu acho que você criou seu projeto assim:

vue init webpack myproject

Bem, agora você pode correr

npm run build

Copie index.html e / dist / folder no diretório raiz do site. Feito.

Se você criou seu projeto usando:

vue init webpack myproject

Você precisaria configurá-lo NODE_ENVpara produção e execução, porque o projeto possui um web pack configurado para desenvolvimento e produção:

NODE_ENV=production npm run build

Copie o dist/diretório para o diretório raiz do site.

Se você estiver implantando com o Docker, precisará de um servidor expresso, servindo o dist/diretório.

Dockerfile

FROM node:carbon

RUN mkdir -p /usr/src/app

WORKDIR /usr/src/app
ADD . /usr/src/app
RUN npm install

ENV NODE_ENV=production

RUN npm run build

# Remove unused directories
RUN rm -rf ./src
RUN rm -rf ./build

# Port to expose
EXPOSE 8080
CMD [ "npm", "start" ]

no seu terminal

npm run build

e você hospeda a pasta dist. para mais, veja este vídeo

Se você tiver problemas com o seu caminho, talvez você precisa mudar a assetPublicPathsua config/index.jsarquivo para o seu sub-diretório:

http://vuejs-templates.github.io/webpack/backend.html

Os comandos para quais códigos específicos executar estão listados dentro do arquivo package.json em scripts. Aqui está um exemplo meu:

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

Se você deseja executar seu site localmente, pode testá-lo com

npm serve

Se você deseja preparar seu site para produção, você usaria

npm build

Este comando irá gerar uma pasta dist que possui uma versão compactada do seu site.

Para implantar seu aplicativo no ambiente prod, adicione

"build": "vue-cli-service build --mode prod"

em seus scripts no arquivo package.json.

Abra seu main.js e adicione

Vue.config.productionTip = false;

logo após suas importações. Em seguida, abra seu CLI na pasta do projeto e execute este comando

npm run build

Isso criará uma pasta dist no diretório do projeto. Você poderá fazer o upload dessa pasta dist no seu host e seu site estará ativo

Este comando é para iniciar o servidor de desenvolvimento:

npm run dev

Onde este comando é para a construção da produção:

npm run build

Certifique-se de procurar e acessar a pasta gerada chamada 'dist'.
Em seguida, comece a enviar todos esses arquivos para o seu servidor.

Uma maneira de fazer isso sem usar o VUE-CLI é agrupar todos os arquivos de script em um arquivo js fat e, em seguida, referenciar esse arquivo javascript grande e gordo no arquivo de modelo principal.

Prefiro usar o webpack como empacotador e criar um webpack.conig.js no diretório raiz do projeto. Todas as configurações, como ponto de entrada, arquivo de saída, carregadores, etc. são todas armazenadas nesse arquivo de configuração. Depois disso, adiciono um script no arquivo package.json que usa o arquivo webpack.config.js para configurações do webpack e começo a assistir arquivos e crio um arquivo agrupado Js no local mencionado no arquivo webpack.config.js.

Eu acho que você pode usar vue-cli

Se você estiver usando o Vue CLI junto com uma estrutura de back-end que lida com ativos estáticos como parte de sua implantação, tudo o que você precisa fazer é garantir que o Vue CLI gere os arquivos criados no local correto e siga as instruções de implantação da estrutura de back-end. .

Se você estiver desenvolvendo seu aplicativo de front-end separadamente do seu back-end - ou seja, seu back-end expõe uma API para conversar com ele, ele é essencialmente um aplicativo estático. Você pode implantar o conteúdo incorporado no diretório dist em qualquer servidor de arquivos estático, mas certifique-se de definir o baseUrl correto

1. npm run build - isso aumentará e diminuirá os códigos

2. salve a pasta index.html e dist no diretório raiz do seu site.

3. serviço de hospedagem gratuito no qual você possa estar interessado - hospedagem Firebase.

se você usou o vue-cli e o webpack ao criar seu projeto.

você pode usar apenas

O npm executa o comando build na linha de comando e cria uma pasta dist no seu projeto. Basta enviar o conteúdo desta pasta para o seu ftp e pronto.

ISTO É PARA IMPLANTAR PARA UMA PASTA PERSONALIZADA (se você quisesse que seu aplicativo não estivesse na raiz, por exemplo, URL / myApp /) - procurei por muito tempo para encontrar esta resposta ... espero que ajude alguém.

Obtenha a CLI do VUE em https://cli.vuejs.org/guide/ e use a construção da interface do usuário para facilitar. Em seguida, na configuração, você pode alterar o caminho público para / o que quer / e vincular ao URL / o que quer que seja.

Confira este vídeo que explica como criar um aplicativo vue usando a CLI se precisar de mais ajuda: https://www.youtube.com/watch?v=Wy9q22isx3U

A documentação do vue fornece muitas informações sobre como você pode implantar em diferentes provedores de host.

npm run build

Você pode encontrar isso no arquivo json do pacote. seção de scripts. Ele fornece scripts para teste e desenvolvimento e construção para produção.

Você pode usar serviços como o netlify, que agrupará seu projeto, vinculando seu repositório do projeto ao github. Ele também fornece informações sobre como implantar em outros sites, como o heroku.

Você pode encontrar mais detalhes sobre isso aqui

Primeiro instale o Vue Cli globalmente

npm install -g @vue/cli

Para criar um novo projeto, execute:

vue create project-name

executar vue

npm run serve 

O Vue CLI> = 3 usa o mesmo binário do vue, substituindo o Vue CLI 2 (vue-cli). Se você ainda precisar da funcionalidade legada do vue init, poderá instalar uma ponte global:

Vue Init Globalmente

npm install -g @vue/cli-init

O vue init agora funciona exatamente da mesma forma que [email protected]

Vue Create App

vue init webpack my-project

Executar servidor de desenvolvedor

npm run dev

Se você deseja criar e enviar para o servidor remoto, pode usar o cli-service ( https://cli.vuejs.org/guide/cli-service.html ), pode criar tarefas para servir, criar e uma para implantar com alguns plugins específicos comovue-cli-plugin-s3-deploy