Using connect-history-api-fallback' ,but not sure how to implement in vuejs

Viewed 1386

When i refresh the page in vuejs, i get nginx error for tht I am using connect-history-api-fallback' ,but not sure how to implement in vuejs , i see that its usage in app.js with middleware server,how do we use in a standalone app in vuejs

1 Answers

I think you could do it in 2 ways.

  1. with just nginx (nginx configuration) (For full nginx config check this link)

    location / {
     try_files $uri $uri/ /index.html;
    } 
    
  2. using express like server (server.js file with connect-history-api-fallback)

     const express = require('express');
     const history = require('connect-history-api-fallback');const app = express();
     app.use(history());
     app.use(express.static('src'));app.get('/', (req, res) => {
       res.sendFile('src/index.html');
     });app.listen(3000, () => console.log('server started'));
    

--in your router you need to use history mode, follow this vuejs history mode.

Follow this blog for reference https://medium.com/swlh/using-vue-routers-history-mode-6d9395e8122e

Related