Diretório de artigos
1. Problemas ao embalar
Ao usar o andaime Vite para desenvolver um projeto, recursos estáticos, como imagens e ícones, serão perdidos no projeto empacotado. Por exemplo, o seguinte:
Meus recursos de imagem estão todos no src/assets/imgdiretório, mas a pasta img não aparece no projeto empacotado ( dist文件夹) após o empacotamento, o que acarretará uma série de problemas como recursos não encontrados após a implantação do projeto.
2. Solução
Método 1:
endereço do site oficial do Vite: https://cn.vitejs.dev/guide/assets.html#importing-asset-as-url
para importar onde os ícones são necessários, por exemplo:
import imgUrl from './img.png'
document.getElementById('hero-img').src = imgUrl
imgUrl será /img.png em desenvolvimento e /assets/img.2d8efhg.png após a compilação de produção. Este método tem uma desvantagem. Será muito problemático quando houver muitos recursos de imagem. Você precisa primeiro criar um script para importar todos os recursos necessários, depois exportá-los na forma de uma matriz e, finalmente, usá-los na forma de travessia. (não testei esse método, mas parece que não deve ser muito diferente, hahahaha).
Método 2: O
método 2 é o segundo método mencionado no site oficial. Coloque todos os recursos estáticos no diretório público e, em seguida, junte esses recursos ao empacotar, conforme mostrado na figura abaixo: Minhas fotos estão todas no diretório . Após
o public/imgempacotamento , a pasta img será compactada no projeto junto, conforme mostrado na pasta dist.
Acabei de olhar o site oficial e resumir esses dois métodos. Se você não gosta de usá-los, pode estudá-los você mesmo e depois compartilhá-los com todos, hahahaha!