Categories
Vue Answers

How to use Vue.js with Nginx?

Spread the love

Sometimes, we want to use Vue.js with Nginx.

In this article, we’ll look at how to use Vue.js with Nginx.

How to use Vue.js with Nginx?

To use Vue.js with Nginx, we should redirect all Vue.js app URLs to index.html.

For instance, we write

location / {
  try_files $uri $uri/ /index.html;
}

in our Nginx config to redirect all Vue app URLs to index.html.

Then we can use history mode with Vue Router to remove the hash by writing

const router = new VueRouter({
  mode: "history",
  routes: [
    //...
  ],
});

by setting mode to 'history' when we’re creating a VueRouter instance.

Conclusion

To use Vue.js with Nginx, we should redirect all Vue.js app URLs to index.html.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *