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 ?
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 ?
Respostas:
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.
npm start
ou algo assim?
vue init webpack myproject
, verá mais instruções em seu console: cd myproject
, npm install
. Depois que npm install
todos os pacotes são baixados e o vue é capaz de compilar com o npm run dev
servidor de desenvolvimento + recarga a quente ou com npm run build
a criação de um pacote configurável.
build.js
está dentro dist
do s3 e index.html
está na raiz.
dist
pasta é tudo o que você precisa. Você não precisa copiar, /index.html
mas apenas index.html
a dist
pasta é necessária. Além disso, antes de executar, npm run build
você deve configurar seu caminho de produção config/index.js
".
Se você criou seu projeto usando:
vue init webpack myproject
Você precisaria configurá-lo NODE_ENV
para 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" ]
vue-cli
Se você tiver problemas com o seu caminho, talvez você precisa mudar a assetPublicPath
sua config/index.js
arquivo para o seu sub-diretório:
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
npm run build - isso aumentará e diminuirá os códigos
salve a pasta index.html e dist no diretório raiz do seu site.
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
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