Dúvida no deploy

Front-end
#1

Olá, pessoal.
Estou iniciando Vue 3 e meu problema é o seguinte:
Ao fazer o deploy no Nginx, aparece apenas uma tela em branco. Nada mais.
Alguém já viu algo parecido?

#2

Dá algum erro no console do navegador?

#3

@Lucas_Camara, boa tarde!
Cara, dá sim. Um erro de sintaxe. Mas já revisei todo o código e não encontrei o problema.

chunk-vendors.50e82bff.js:1 Uncaught SyntaxError: Unexpected token ‘<’ (at chunk-vendors.50e82bff.js:1:1)

app.6ccb21dd.js:1 Uncaught SyntaxError: Unexpected token ‘<’ (at app.6ccb21dd.js:1:1)

#4

como tá seu processo de build da aplicação? vc tá hiddando o código fonte?

#5

@rodriguesabner
Boa noite, mano!

Cara, só rodando o npm run build rs

#6

O seu projeto está no github para que a gente possa dar uma olhada?

#7

Oi @Lucas_Camara
Boa noite!

Está sim…

#8

baixei aqui e de fato nao ta rolando… parece ser algo no processo de build mesmo, mas como queria resolver rapido, iniciei outro projeto com o vite, fiz a migração dos arquivos e funcionou legal.

Outra coisa que não tá rolando tb é um import q vc fez do veeValidation no arquivo main.js

import { veeValidation } from 'vee-validate';

não existe isso dentro desse pacote, pelo menos na versão que vc colocou no projeto.

como vc ta usando o jsconfig, eu tive que colocar isso no vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
})
#9

@rodriguesabner
Vlw mesmo, mano!

Vou fazer o mesmo então.
Crio um novo projeto com o vite e tento fazer o build.

Mas pode me explicar rapidinho oq esse código faz?

import { defineConfig } from ‘vite’
import vue from ‘@vitejs/plugin-vue’
import path from ‘path’

// Configuring Vite | Vite
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
‘@’: path.resolve(__dirname, ‘./src’),
},
},
})

#10

Ao invés de vc ficar fazendo import com “…/…/…/” pra chegar no src/*, o config cria um alias que permite que a pasta src/ possa ser acessada por isso: @.

//cria um alias no projeto inteiro
//pra entender o que significa @.
alias: {
'@': path.resolve(__dirname, ‘./src’),
// ou seja:
// @ significa sempre ./src/
// ex: @/view/home/Home.vue
},

então o import seria sempre assim:

import Home from @/view/home/Home.vue

ao invés de

import Home from ../../view/home/Home.vue
#11

Bom dia, @rodriguesabner
Vlw mesmo pela explicação!

Só uma última dúvida, existe algum processo expecífico pra importar o projeto para o vite?

#12

@rodriguesabner, fiz um teste criando um novo projeto usando o vite e tentei subir usando o tomcat.
Acontece o mesmo problema. Apenas mostra uma tela em branco.

O console do navegador mostra as msgs:

Failed to load resource: the server responded with a status of 404 ()
index-d7bd537c.js:1

Failed to load resource: the server responded with a status of 404 ()
index-fc5f319f.css:1

#13

Eu criei do zero mesmo e dps fui passando os arquivos.

———-

Vou subir uma pr no seu projeto

#14

pronto, só aprovar a pr. dps tenta novamente

#15

@rodriguesabner, vlw demais!
Vou testar e te mando notícias.

1 curtida
#16

blz, se mesmo assim não funcionar, mostra como vc ta subindo no tomcat, até pq não necessariamente precisa subir lá pra testar… ao gerar o build, é como se vc tivesse rodando um html “normal”.

#17

@rodriguesabner , bom dia!
Ele segue dando o mesmo erro.
Depois de gerar o build, apenas coloco oq foi gerado na pasta dist dentro da pasta do projeto no TOMCAT. Mas ao acessar, a tela segue em branco, pq ele deveria chamar a url http://localhost:8080/PROJETO/assets/index-d7bd537c.js, mas tá chamando http://localhost:8080/assets/index-d7bd537c.js sem chamar o PROJETO.

#18

insere essa linha no seu vite.config.js:

base: "/NOME_PROJETO"

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  base: "/NOME_PROJETO",
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
})
#19

@rodriguesabner , funcionou em partes rsrs
Ele abriu no Tomcat, acessou a API, fez o login… Tudo certo.
Mas quebrou o css kkkkkk

#20

@rodriguesabner, boa tarde!
Cara, identificquei um problema aqui, será que pode me dar mais uma ajuda?
Subi lá no tomcat pra testar, e depois da última alteração a tela apareceu rs
Mas nenhum dos componentes do primevue funciona.