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
1 curtida
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:
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
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:
Mas não é. É isso:
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:
Ele não encontra a página. Retorna a minha página de NOT FOUND.
Mas se eu digitar:
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
1 curtida
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?
1 curtida
Não… http
como vc liberou as requisições? uma coisa é chamar via POSTMAN, outra é pelo browser
Sim sim