Reload the page in Vue 3 no dist can not find the page

Asked

Viewed 23 times

0

Creating a simple application in vue3 cli and entering the router page he gives me this code ->

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'

const routes = [
{
  path: '/',
  name: 'Home',
  component: Home
},
{
  path: '/about',
  name: 'About',
  // route level code-splitting
  // this generates a separate chunk (about.[hash].js) for this route
  // which is lazy-loaded when the route is visited.
  component: () => import(/* webpackChunkName: "about" */ 
   '../views/About.vue')
 }
 ]

 const router = createRouter({
   history: createWebHistory(process.env.BASE_URL),
   routes
  })

  export default router

the problem is: When I give an npm run build on the console, it returns me a dist and when I put the dist on the server apache2 and enter the page, it works perfectly at first. When I enter the /about page through the menu it works but if I continue on the /about page and reload the page, it gives a 404 error, someone knows how to tidy up?

vue.js vue-router

  • https://router.vuejs.org/guide/essentials/history-mode.html#example-server-Configurations. Or you can try with mode:'hash' to test.

  • Dude, I already tested mode:'hash' and it worked, but I wanted a solution that didn’t use it. Tb tried to create . htaccess with the code that has this link but tb did not work

1 answer

0


I was able to solve the problem by putting /etc/apache2/sites-enabled/000-default.conf

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

inside the virutalHost

and activating mod_rewrite using the command

a2enmod rewrite

Browser other questions tagged vue.js vue-router

You are not signed in. Login or sign up in order to post.