Como implantar o aplicativo Vue?


131

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 ?


Ele deve fazer parte do cli, aqui está a página de documento de implantação vuejs.org/v2/guide/deployment.html Dependendo da versão que você possui, do modelo usado, provavelmente será um pouco diferente. Mas você deve especificar que está fazendo uma construção de produção como nos documentos.
Swimburger

2
Eu uso 2.2.1 vue. Eu vejo a documentação, mas não há informações sobre implantação. Eu não estou usando nodejs no hoster. Então, quando eu iniciá-lo em localhost funciona, mas quando eu baixar todos os arquivos para hoster, há nada na página
artem0071

8
Quando você faz uma compilação, provavelmente compilará todos os arquivos (html, css, js) em uma pasta / dist. Essa pasta dist deve ser a raiz do seu aplicativo na sua hospedagem. (Eu não usar vue2 ainda, mas eu aposto que ele vai estar lá)
Swimburger

Hey guys Eu tive esse mesmo prov na semana passada e escreveu smth-se se isso ajuda ninguém: medium.com/@seenickcode/...
seenickcode

Eu tenho carregado os arquivos da pasta dist de cpanel, mas está mostrando apenas em branco
Fayaz

Respostas:


171

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.


1
Não há necessidade de executar npm startou algo assim?
nu Everest

@nueverest, se você acabou de criar seu projeto vue init webpack myproject, verá mais instruções em seu console: cd myproject, npm install. Depois que npm installtodos os pacotes são baixados e o vue é capaz de compilar com o npm run devservidor de desenvolvimento + recarga a quente ou com npm run builda criação de um pacote configurável.
Egor Stambakio

Isso não parece funcionar com o roteador vue ... Estou fazendo algo errado?
Andy Hayden

1
@AndyHayden uma verificação do AWS S3 se 1) índice e documento de erro === index.html; 2) políticas são definidas para site estático ; 3) sua pasta build.jsestá dentro distdo s3 e index.htmlestá na raiz.
Egor Stambakio

9
a resposta deve ser "o conteúdo da distpasta é tudo o que você precisa. Você não precisa copiar, /index.htmlmas apenas index.htmla distpasta é necessária. Além disso, antes de executar, npm run buildvocê deve configurar seu caminho de produção config/index.js".
David天宇Wong

24

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

você expõe esse contêiner para o exterior ou usa o nginx ou o apache como proxy?
Hakim

Sim, você pode usar o Apache ou Nginx como proxy, a porta 80
Akinjide

paste.ubuntu.com/p/dryhSwnYh5 WORKDIR / usr / src / app pode ser WORKDIR / app? também é necessário o CMD ["http-server", "dist"] para servir via servidor http? em vez de CMD ["npm", "start"]
LOG_TAG 26/07/19

Versão: webpack 3.12.0 Tempo: 16548ms Nomes dos fragmentos dos pedaços de tamanho de ativo build.js 2,15 MB 0 [emitido] [grande] main build.js.map 9,74 MB 0 [emitido] main - Isso surge após a execução do cmd acima no projeto pasta - você pode me guiar através do próximo passo para entrar na vida? -
Hamendra Sunthwal

7

no seu terminal

npm run build

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


Isso pressupõe incorretamente que exista um script de construção no package.json.
acidente de springfield

4
@crashspringfield Uma suposição precisa fazer quando o OP está pedindo especificamente sobre a aplicação Vue criado comvue-cli
Dan Fletcher

4

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


Certifique-se de alterar a compilação: {..... assetsPublicPath: './', que pontilha antes da barra ser importante. Mas também existe um assetsPublinPath no objeto dev nesse arquivo, portanto, altere o correto.
21918 Shane G

Versão: webpack 3.12.0 Tempo: 16548ms Nomes dos fragmentos dos pedaços de tamanho de ativo build.js 2,15 MB 0 [emitido] [grande] main build.js.map 9,74 MB 0 [emitido] main - Isso surge após a execução do cmd acima no projeto pasta - você pode me guiar através do próximo passo para entrar na vida? -
Hamendra Sunthwal

2

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.


1

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


0

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.


0

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.


0

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


você está certo, mas como o show resposta aceita, a pergunta era sobre qual comando para executar depois
JR Utily

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


0

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.


basta enviar a pasta dist para o seu ftp e pronto? e como acessar o aplicativo Vue no servidor?
Hamendra Sunthwal

0

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


0

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


0

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 vue-cli@2.x

Vue Create App

vue init webpack my-project

Executar servidor de desenvolvedor

npm run dev

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.