URL em apache

Olá meu aluno. No capítulo de dicas e truque s há uma parte que lida com a troca da url api em produção. Cogitou usar estratégia semelhante?

Tipo as urls no css estão por exemplo: elemento{ background-image: url('/static/imagem.jpg') e ai quando da build e vou testar, ele busca em http://localhost/static/imagem.jpg e não no diretorio atual do localhost... se eu altero de /static/imagem.jpg para static/imagem.jpg o webpack acusa erro na hora do build. Há alguma forma de alterar a url de /static para static ou ../static quando compila pra produção?

Acho que uma solução seria criar uma função em Sass para retornar a url absoluta do servidor e concatenar com a imagem passada por parâmetro.

Conseguiu ? Eu dar uma olhada hoje aqui para ver uma solução só com Vue.

Se arrastar a pasta static para dentro do src também pode ser uma solução. Lembrando que é para teste em http://localhost/subdiretorio, se fosse em http://localhost não precisaria modificar nada.

Pois é. O Vue CLI não espera essa estrutura. Ele espera tudo na raiz.

Vi a galera fazendo ajuste no back para não ter que mexer na Vue CLI. Mas sua dúvida é justa, por isso estou vendo a melhor forma.

Só para deixar claro, tanto local quanto em produção você quer trabalhar com subpasta, certo?

Sim, pois já testo em ambiente local no apache, que posteriormente é enviado para a hospedagem (apache). E como não crio um subdomínio para cada aplicação de demonstração, preciso criar diretórios.

Só não esquece que você vai ter que arrumar um jeito no seu server para devolver index.html para qualquer requisição, inclusive erro e 404. Se não fizer isso vai ter que usar # nas urls.

Isso é padrão de todo SPA que quer fazer uso do modo history.

Bom, olhando a documentação do Vue CLI, você esta saindo da convenção que ele impõe. Sendo assim, vai ter que se debruçar no webpack e criar o seu próprio webpack.config.js.

Não quero entrar dentro do webpack porque só ele justificaria um curso inteiro, o que eu estou vendo aqui é possibilidade de mudar o caminho dos loaders, mas não vi de uma maneira simples ainda.

Só uma detalhe que me passou desapercebido. Você mudou o base do VueRouter, certo? Isso não tem relação com o diretório da sua aplicação no server, isso só diz respeito ao browser. Ele encontrará os arquivos contanto que estejam servidos.

Isso ficou claro para você?

Agora, se quiser mudar o caminho dos assets em produção, pode tentar alterar essa linha do webpack.config:

publicPath: process.env.NODE_ENV === 'production' ? '.SEU_CAMINHO_DE_PRODUCAO' : '/dist/',

É uma tentativa.

o (base) é por causa dos links. senão eles ficariam / e não app/. Não muda em relação ao css e imagens, mas sim aos links utilizados pela router-link. --

publicPath: process.env.NODE_ENV === 'production' ? '.SEU_CAMINHO_DE_PRODUCAO' : '/dist/'
Não interfere o caminho de static

O problema é realmente o caminho das imagens que ficam fora da src, no caso em static. Sendo que ao especificar uma url: /static/imagem.jpg, o servidor não irá encontrar essa url no diretório atual. Se utilizar <img src="static/imagem.jpg"> funciona, mas se mudar para <img src="/static/imagem.jpg"> não;

Creio que para solucionar isso é só no htaccess ou mover a static para dentro de src.

Qual hospedagem o pessoal utiliza para SPA? No caso de uma hospedagem de revenda, que há diversos sub-diretórios (meu caso), como ficaria?

Na prática não se hospeda as imagens no mesmo servidor do a aplicação, elas ficam uma cloud qualquer para não onerar o server, mas claro, não há nada de errado seu servidor compartilhar também.

Então, no caso que fica hardcored o endereço das imagens, talvez uma solução seja criar uma função que receba como parâmetro o caminho da imagem e faz o ajuste em produção ou desenvolvimento. Dai você chamaria as imagens assim:

<img src="carregaImagem('/static/teste.png')">

Você pode escolher qualquer hospedagem, contanto que eles lhe fornecem um bom suporte, principalmente esclarecendo questões como essa, detalhes de deploy de SPA.

Mas eu preciso de algumas imagens, como por exemplo o logo da página, svgs de icones que não fazem parte de fontes (glyphicon, etc), ou qualquer outra imagem que não seja buscada de APIs, mas façam parte do layout.

Podemos encerrar o tópico, mas antes lhe agradeço pela atenção e dizer que o curso foi muito bom!

Obrigado!