Nginx - How to Setup Web Site with Single Page Application(SPA)?

1710 ワード
webpack Vue.js nginx SinglePageApplication nginx テキストリンク

When you serve a web site in SPA, you will get 404 after F5 refresh page.

For example: We want to access a url http://127.0.0.1:8080/taiwan

1. Modified Web Vue Project Code

router.js
new VueRouter({
  mode: 'history',
  base: '/taiwan',
  ...
)}
webpack.config.js
...
output: {
  ...
  publicPath: '/taiwan'
},
...

2. Modified Nginx Configuration

location /taiwan {
  alias   /usr/share/nginx/html/taiwan/;
  try_files $uri $uri/ /taiwan/index.html;
  index  index.html;
}

3. Nginx Reload

# nginx -s reload