através do vue-Usando CLI para aprender a modificar configurações de ambiente e problemas de publicação do Webpack

A razão pela qual o Vue está tão popular agora também deve-se em parte ao gerador de ferramentas oficiais de scaffold Vue-O cli, simplifica significativamente o custo de configuração do ambiente para iniciantes, mas na prática, muitas vezes precisamos implementar outras funcionalidades para modificar o webpack. Este artigo abordará algumas necessidades de negócios reais, aprendendo primeiro o vue-modelo gerado pelo cli, e em seguida fazer as modificações relevantes.

Vue-diretório de arquivos de modelo gerados pelo cli

├── README.md
├── build
│ ├── build.js
│ ├── check-versions.js
│ ├── dev-client.js
│ ├── dev-server.js
│ ├── utils.js
│ ├── webpack.base.conf.js
│ ├── webpack.dev.conf.js
│ └── webpack.prod.conf.js
├── config
│ ├── dev.env.js
│ ├── index.js
│ └── prod.env.js
├── index.html
├── package.json
├── src
│ ├── App.vue
│ ├── assets
│ │ └── logo.png
│ ├── components
│ │ └── Hello.vue
│ └── main.js
└── static

O ponto principal que este artigo se concentra é

build - Código da tarefa de compilação

config - Arquivo de configuração do webpack

package.json - Informações básicas do projeto

Aqui não será detalhado o significado de cada linha da configuração do webpack, por favor, consulte o vue2.0 arquivo de configuração do webpack

Necessidade comum 1: Configuração e lançamento de múltiplos ambientes

Vue-O template gerado pelo cli configura apenas o npm run dev, npm run build, essas linhas de script, respectivamente para iniciar o serviço de ambiente de desenvolvimento e executar a打包. Normalmente, o processo de desenvolvimento de uma empresa normal pelo menos terá desenvolvimento, simulação de teste, ambiente de produção, e os endereços de solicitação de servidor ou alguns parâmetros de configuração serão diferentes em cada ambiente, e precisará de scripts automatizados para executar o build e o lançamento.

Primeiro precisamos esclarecer essa questão, transcrevendo um artigo, autor: Zheng Haibo, link, fonte: Zhihu

Isso não tem nada a ver com o vue, é um problema geral: onde o código é construído. Se o servidor do usuário se refere ao servidor de execução, na verdade, nenhum dos dois é uma boa escolha. Muitos novos membros, incluindo eu antes de trabalhar, acreditavam que a deploy do código seria assim

Mas na verdade, em grandes empresas de internet, pode ser um pouco mais complicado. As seguintes introduções são práticas comuns e alguns processos foram simplificados apenas para facilitar a compreensão dos novos membros. A submissão de código para o servidor git ou svn atenda aqui é o arquivo de origem, não o arquivo buildado

2. A construção do servidor puxará o código da versão a ser lançada do servidor git aqui, onde será completada a instalação das dependências, como o vue do usuário. E construirá os arquivos necessários para o deployment, que geralmente também serão compactados em um pacote para gerenciamento

3O pacote de publicação construído será carregado para o intermediário: cluster de servidores de gerenciamento de arquivos

4Os servidores em execução geralmente não serão um único servidor, mas um cluster. Esses n servidores irão puxar o pacote comprimido da versão correspondente do servidor de arquivos e descompactá-lo para execução.

　

Na verdade, há uma ordem clara de precedência no processo, e seria muito complicado se tudo fosse feito manualmente. Portanto, geralmente, grandes empresas têm uma plataforma de deploy automatizado para统筹全局完成这些工作. Como desenvolvedores, tudo o que precisamos fazer é clicar em "Deploy em um clique" para completar o conteúdo acima.

Se estiverem usando plataformas de deploy automatizado fornecidas por gitlab, github e outros, como webhook de notificação automática, o código da versão estável já foi enviado (Push Event). Então, nem precisamos clicar em nenhum botão. Isso é um caso típico de separação de construção e deploy, trazendo muitos benefícios, como garantir que a construção seja um código, evitar a possibilidade de inconsistência devido ao build multi-ambiente. Geralmente, é uma ação de alto custo, que pode causar instabilidade no servidor de execução. Pode ser rapidamente revertido ou restaurado, e não é necessário reestruturar o código da mesma versão...

Depois de tantas palavras, é claro que empacotar e construir não é uma tarefa simples, então precisamos de ferramentas de automação para configurar. A solução madura existente é usar o docker para construir um contêiner de aplicativo para construir e publicar. No entanto, eu não estou familiarizado com isso, e os amigos que sabem podem compartilhar.

Resumo

O que foi mencionado acima é o que o editor apresentou sobre a configuração e o problema de publicação do Webpack multi-ambiente, esperando que ajude a todos. Se tiverem alguma dúvida, por favor, deixem um comentário, o editor responderá a tempo. Agradecemos também o apoio ao tutorial de clamor!

Declaração: O conteúdo deste artigo é extraído da Internet, pertencente ao respectivo detentor dos direitos autorais, o conteúdo é submetido voluntariamente pelos usuários da Internet e carregado automaticamente. Este site não possui direitos de propriedade, não foi editado manualmente e não assume responsabilidade por eventuais responsabilidades legais. Se encontrar conteúdo suspeito de violação de direitos autorais, por favor, envie um e-mail para: notice#w3Aviso: Quando enviar um e-mail, substitua # por @ para denunciar e forneça provas relevantes. Assim que confirmado, o site deletará imediatamente o conteúdo suspeito de violação de direitos autorais.