Depois que o vue3 é empacotado e implantado, a página de acesso index.html fica em branco e o problema nginx404 ocorre após a atualização da página
Pergunta 1: A página de acesso index.html está em branco e a mensagem de aviso pré-carregada é a seguinte
The resource http://xxx.xxx/css/chunk-vendors.eed3e5ae.css was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.
As dicas são pré-carregadas com links, mas não são usadas por alguns segundos após o evento de carregamento da janela. Certifique-se de que ele tenha um
asvalor apropriado e esteja pré-carregado propositalmente. Infere-se que a página está em branco porque existem arquivos pré-carregados que não foram carregados.
Solução
Ao configurar pedaços na configuração do webpack (vue.config.js), resolva o problema de pré-carregamento adicionando parâmetros ['chunk-vendors', 'chunk-common'], como segue
// vue.config.js
{
chunks: ['chunk-vendors', 'chunk-common']
}
Pergunta 2: Após empacotar e implantar, a interface pode ser acessada e usada normalmente, mas o problema do nginx404 será relatado ao atualizar a interface ou alterar o acesso à barra de endereço
Situação do projeto: Use createWebHistory para criar histórico para obter o efeito do caminho de acesso sem #, mas descobriu que o projeto não está configurado com encaminhamento nginx. No documento vue-router, a configuração do nginx precisa ser encaminhada para index.html quando usado com criarWebHistory
Solução
Configure o encaminhamento nginx, como segue
localtion / {
...
...
try_files $uri $uri/ /index.html last;
}