nuxtjs cannot display dynamic url on production

Question

I'm using nuxjs to build my project and I create a page which displays place information dynamically.

when I run npm run dev and test on http://localhost:3000/place/66bb50b7a5 is work well.

but after I run npm run generate, I get the dist folder, I put in on MAMAP and try to run http://mysite:7074/place/66bb50b7a5, it shows 404 page not found.

My dist folder is like this

please tell me what wrong on my code and what I should do.

Thank you.

Answer 1

You have to config your web server to response index.html when receive requests like /place/66bb50b7a5

vue-router doc have example configurations for Apache, nginx, IIS...

For MAMP (apache):

1. create an file name .htaccess in your MAMP htdocs folder
2. paste apache configuration from vue-router doc

.htaccess:

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