Dúvida no deploy

Dá algum erro no console do navegador?

@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)

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

@rodriguesabner
Boa noite, mano!

Cara, só rodando o npm run build rs

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

Oi @Lucas_Camara
Boa noite!

Está sim…

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'),
    },
  },
})

@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’

// <a href="https://vitejs.dev/config/" class="inline-onebox" rel="noopener nofollow ugc">Configuring Vite | Vite</a>

export default defineConfig({

plugins: [vue()],

resolve: {

alias: {

‘@’: path.resolve(__dirname, ‘./src’),

},

},

})

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

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?

@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

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

———-

Vou subir uma pr no seu projeto

pronto, só aprovar a pr. dps tenta novamente

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

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”.

@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.

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'),
    },
  },
})

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

@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.

O que era?

Já vejo isso

o que exatamente nao funciona?

Oi @rodriguesabner
Cara, os componentes do Primevue que estava usando.
Por exemplo, o Dialog, a ProgressBar… nenhum deles funciona mais.
É como se o css deles tbm tivesse quebrado, entende?
Ele chama os dois, mas exibe como se fosse um texto solto na tela com uns botões sem formatação nenhuma.

Entendi, só o css no caso

Vi aqui no seu main que vc tá usando esse cara aqui como “estilização”.

import "primevue/resources/primevue.min.css"

e de fato o dialog/qlqer outra coisa fica sem estilo.

Adicionei essa aqui:

import "primevue/resources/themes/saga-blue/theme.css"

e deu certo:

image755×314 11.8 KB

Claro, vc pode escolher qualquer um outro tema que eles ofereçam, eu escolhi no aleatório

E só + um detalhe que vi no seu Dialog, do jeito que ta agora nao ta fechando quando clica no “X”

<Dialog name="retornoOperacao" id="retornoOperacao" v-model:visible="retornoOperacao" :breakpoints="{'960px': '75vw', '640px': '90vw'}" :style="{width: '50vw'}">
    <p class="h5" >{{ msgRetornoOperacao }}</p>
    <template #footer>
      <Button label="Fechar" icon="pi pi-times" @click="fecharRetornoOperacao" class="p-button-danger" />
    </template>
  </Dialog>

Pra isso funcionar vc só precisa adicionar esse cara dentro de Dialog:

@update:visible="fecharRetornoOperacao"

@rodriguesabner
Fiz a alteração, mas no vite preview sigo com o problema.
Acontece em todos os Dialog

modal800×465 14.2 KB

Mostra seu main como ficou

import { createApp } from ‘vue’

import App from ‘./App.vue’

import router from ‘./router/router.js’;

import axios from ‘axios’;

import VueAxios from ‘vue-axios’;

import { createStore } from ‘vuex’;

import PrimeVue from ‘primevue/config’;

import “bootstrap/dist/css/bootstrap.min.css”;

import “bootstrap”;

import “@fortawesome/fontawesome-free/css/all.css”;

import “primevue/resources/themes/saga-blue/theme.css”                  //core css

import “primeicons/primeicons.css”                           //icons

import ToastService from ‘primevue/toastservice’;

import “bootstrap/dist/css/bootstrap.min.css”

import “bootstrap”

const store = createStore({

state () {

return {

isLogged: false,

user:{

nome:“”

},

appAmbiente: “”,

}

},

mutations: {

login (state) {

state.isLogged = true;

},

logout (state){

state.isLogged = false;

},

usuarioLogado(state,user){

state.user = user;

},

setAppAmbiente(state, ambiente) {

state.appAmbiente = ambiente;

},

},

actions: {

login (context) {

context.commit(‘login’)

},

logout (context) {

context.commit(‘logout’)

},

atualizarUsuarioLogado(context,user){

context.commit(‘usuarioLogado’,user);

},

atualizarAppAmbiente(context, ambiente) {

context.commit(‘setAppAmbiente’, ambiente);

},

},

});

const app = createApp(App);

app.use(router);

app.use(VueAxios, axios);

app.use(PrimeVue);

app.use(ToastService);

app.use(store);

app.mount(‘#app’)

Pode manter essa importação aqui.

Da uma reiniciada na aplicação tb, so pra garantir

@rodriguesabner , boa tarde!
Desculpa o sumiço… rs
O problema do css era no main.js
Precisei incluir a propriedade:

app.use(PrimeVue, { unstyled: false });

Isso resolveu o problema.
Mas, tem uma outra parada acontecendo e essa eu tô boiando.
O projeto é o siscf-web. Deveria ser isso na url:

http://localhost:4173/siscf-web/home

Mas não é. É isso:

http://localhost:4173/home

Quando dou um F5 na página, recebo um erro:

GET http://localhost:4173/home 404 (Not Found)

Se eu incluir o siscf-web na url:

http://localhost:4173/siscf-web/home

Ele não encontra a página. Retorna a minha página de NOT FOUND.

Mas se eu digitar:

http://localhost:4173/siscf-web

Ele consegue abrir minha home normalmente. Inclusive a navegação funciona tbm.

Esse é o meu main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/router.js';
import axios from 'axios';
import VueAxios from 'vue-axios';
import { createStore } from 'vuex';
import PrimeVue from 'primevue/config';

>import Calendar from 'primevue/calendar';

import DataTable from 'primevue/datatable';
import Column from 'primevue/column';
import ColumnGroup from 'primevue/columngroup';   // optional
import Row from 'primevue/row';                 // optional

import "bootstrap/dist/css/bootstrap.min.css";
import "@fortawesome/fontawesome-free/css/all.css";
import "primevue/resources/themes/saga-blue/theme.css"
import "primeicons/primeicons.css"
import ToastService from 'primevue/toastservice';
import "bootstrap/dist/css/bootstrap.min.css"
import "bootstrap"

const store = createStore({
    state () {
        return {
            isLogged: false,
            user:{
                nome:""
            },
            appAmbiente: "",
        }
   },

    mutations: {
        login (state) {
            state.isLogged = true;
        },
        logout (state){
            state.isLogged = false;
        },
        usuarioLogado(state,user){
            state.user = user;
        },
        setAppAmbiente(state, ambiente) {
            state.appAmbiente = ambiente;
        },
    },

    actions: {
        login (context) {
            context.commit('login')
        },
        logout (context) {
            context.commit('logout')
        },
        atualizarUsuarioLogado(context,user){
            context.commit('usuarioLogado',user);
        },
        atualizarAppAmbiente(context, ambiente) {
            context.commit('setAppAmbiente', ambiente);
        },
    },
});

const app = createApp(App);
app.use(router);
app.use(VueAxios, axios);
app.use(PrimeVue, { unstyled: false });
app.component("Calendar", Calendar);
app.component("DataTable", DataTable, { unstyled: false });
app.component("Column", Column, { unstyled: false });
app.component("ColumnGroup", ColumnGroup, { unstyled: false });
app.component("Row", Row, { unstyled: false });
app.use(ToastService);
app.use(store);
app.mount('#app')

E o meu router.js

import { createWebHistory, createRouter } from "vue-router";
import Home from "@/view/home/Home.vue";
import Login from "@/form/login/Login.vue";
import NotFound from "@/components/NotFound.vue";
import NovoFornecedor from "@/form/fornecedor/NovoFornecedor.vue";
import Produto from "@/form/produto/Produto.vue";
import Fornecedor from "@/form/fornecedor/Fornecedor.vue";
import NovoProduto from "@/form/produto/NovoProduto.vue";
import EditarProduto from "@/form/produto/EditarProduto.vue";
import EditarFornecedorPF from "@/form/fornecedor/EditarFornecedorPF.vue";
import EditarFornecedorPJ from "@/form/fornecedor/EditarFornecedorPJ.vue";
import Entrada from "@/form/estoque/entrada/Entrada.vue";
import Saida from "@/form/estoque/saida/Saida.vue";
import NovaEntrada from "@/form/estoque/entrada/NovaEntrada.vue";
import NovaSaida from "@/form/estoque/saida/NovaSaida.vue";
import Posicao from "@/form/estoque/posicao/Posicao.vue";

const routes = [
  {
    path: "/home",
    name: "Home",
    component: Home,
  },
  {
    path: "/siscf-web",
    name: "raiz",
    component: Home,
  },
  {
    path: "/login",
    name: "Login",
    component: Login,
  },
  {
    path: "/fornecedor",
    name: "Fornecedor",
    component: Fornecedor,
  },
  {
    path: "/novoFornecedor",
    name: "novoFornecedor",
    component: NovoFornecedor,
  },
  {
    path: "/editarFornecedorPF/:id",
    name: "editarFornecedorPF",
    component: EditarFornecedorPF,
  },
  {
    path: "/editarFornecedorPJ/:id",
    name: "editarFornecedorPJ",
    component: EditarFornecedorPJ,
  },
  {
    path: "/produto",
    name: "produto",
    component: Produto,
  },
  {
    path: "/novoProduto",
    name: "novoProduto",
    component: NovoProduto,
  },
  {
    path: "/editarProduto/:id",
    name: "editarProduto",
    component: EditarProduto,
  },
  {
    path: "/entrada",
    name: "entrada",
    component: Entrada,
  },
  {
    path: "/novaEntrada/:id",
    name: "novaEntrada",
    component: NovaEntrada,
  },
  {
    path: "/saida",
    name: "saida",
    component: Saida,
  },
  {
    path: "/novaSaida/:id",
    name: "novaSaida",
    component: NovaSaida,
  },
  {
    path: "/posicao",
    name: "posicao",
    component: Posicao,
  },
  {
    path: '/:catchAll(.*)',
    name: 'notFound',
    component: NotFound
  },
];

const router = createRouter({
  history: createWebHistory(/*import.meta.env.BASE_URL*/),
  routes,
});

router.beforeEach((to, from, next) => {
  if (to.name !== 'Login' &&  sessionStorage.getItem('token') == null) next({ name: 'Login' })
  else if (sessionStorage.getItem('sci-api') != null) {
    next()
  }
  else next()
})
export default router;

quando for colocar código aqui, usa o </>

é pq não existe um siscf-web/home nas suas rotas. Ou é um, ou é outro. Teria que mudar pra ficar do jeito q vc quer

Agora referente a esse erro… vc ta usando apache né, cria um arquivo .htaccess no Root da sua aplicação e cola esse código:

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-l
  RewriteRule . /index.html [L]
</IfModule>

faz o teste novamente dando F5 na página e diz se deu certo aqui

Opa, @rodriguesabner , vlw pela dica.
Vou fazer isso quando colocar código aqui.

Na vdd, ele irá subir no TOMCAT.
Estou simulando uma aplicação em produção e rolando alguns erros… Esse é um!
Outro que roal tbm é pra acessar a API. O login chama um endpoint (localhost:3004/siscf-api/auth).
O front tá rodando no TOMCAT tbm, mas como “endereco/siscf-api/auth” e dá erro de CORS.
Na API tá ok. Inclusive, pra testar, liberei todas as requisições, mas não rolou. Existe alguma configuração de CORS a fazer no VUE?

aí vc pode abrir outro tópico falando sobre, eu não tenho conhecimento com TOMCAT.

endereço é https?

Não… http

como vc liberou as requisições? uma coisa é chamar via POSTMAN, outra é pelo browser

Sim sim