Add _redirects file to root path for Vue SPA hosted on Netlify

Question

I'm developing a Single Page App using Vue CLI and want history pushstate to work so I get clean URLs.

I have to follow this: https://www.netlify.com/docs/redirects/#history-pushstate-and-single-page-apps and add a _redirects file to the root of my site folder with the following:

/*    /index.html   200 

The problem is I don't know how to add this _redirects file to the root of my dist folder. I tried adding it to the static folder but it ends up in a subfolder and not in root. How can I include this file so that history mode works after deploying on Netlify ?

// config/index.js build: {   // Paths   assetsRoot: path.resolve(__dirname, '../dist'),   assetsSubDirectory: 'static',   assetsPublicPath: '/', 

Answer 1

vue-cli created app 3.x

For the new build setup using the vue-cli version 3.0.0-beta.x there is a public folder now and you do not need the following setup. Just put your _redirects file under the public folder root. When you build it will make a copy to the dist folder which will be used for your deploy.

vue-cli created app prior to 3.x

Vue.js uses webpack to copy the static assets. This is maintained in webpack.prod.conf.js for the production build which is what you will need in this case for Netlify. I believe the best and cleanest configuration is based on this solution.

Search the file for the new CopyWebpackPlugin in webpack.prod.conf.js.

// copy custom static assets new CopyWebpackPlugin([   {     from: path.resolve(__dirname, '../static'),     to: config.build.assetsSubDirectory,     ignore: ['.*']   } ]) 

Create a root ( folder in your project same level of the static folder ) You could name this anything you like, but I will use root for the example.

You would then make sure the _redirects file is in the new root directory or whatever you called it. In this case it is named root

Now modify the webpack.prod.conf.js CopyWebpackPlugin section to look like the following:

// copy custom static assets new CopyWebpackPlugin([   {     from: path.resolve(__dirname, '../static'),     to: config.build.assetsSubDirectory,     ignore: ['.*']   },   {     from: path.resolve(__dirname, '../root'),     to: config.build.assetsRoot,     ignore: ['.*']   } ])