Add _redirects file to root path for Vue SPA hosted on Netlify
Solution 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: ['.*']
}
])
Solution 2
You could also just use the netlify.toml
file which tends to be a bit cleaner. Just put this in the file to get the redirect you were looking for:
# The following redirect is intended for use with most SPA's that handles routing internally.
[[redirects]]
from = "/*"
to = "/index.html"
status = 200
netlify.toml
is normally stored in the root of your site repository.
You can find more info about this file here.
Solution 3
I've tried Rutger Willems's snippet without the last line and it works. Credit goes to Hamish Moffatt.
[[redirects]]
from = "/*"
to = "/index.html"
status = 200
Solution 4
Just in case you're looking for an answer on Nuxt instead of Vue, add the _redirects file to the static/ directory.
Solution 5
You can simply add the _redirects file to your /public directory in your vue app
Related videos on Youtube
Alex
Updated on June 09, 2022Comments
-
Alex almost 2 years
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: '/',
-
Alex over 6 yearsYes I have tried placing the
_redirects
file in the static folder but it is then placed in the static folder in dist folder whereas I need to have_redirects
at root after build so that Netlify picks it up -
talves over 6 yearsRight, but did you check your setting like mentioned in the answer above?
-
Alex over 6 yearsYes I have the same settings as above (edited in my question), I'm trying to avoid changing the SubDirectory to empty string so that the
_redirects
file ends in the root of the public folder as I only need it for this file -
talves over 6 yearsI see your problem now. sorry, see my edits based on your requirements
-
Alex over 6 yearsYour new answer is spot on ! Thank you very much. I'm sure it will be useful to other people who are hosting a Single Page App on Netlify
-
talves over 6 yearsIt should help anyone using vue.js for sure and Netlfy
-
Eddy R. almost 6 yearsThe webpack configuration is all different in vue-cli version 3. How would we do the equivalent configuration in that setup?
-
talves almost 6 yearsFor 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 this setup. Just put your
_redirects
file under thepublic
folder root. When you build it will make a copy to the dist folder which will be used for your deploy. -
Eddy R. almost 6 yearsAwesome thanks! You should add that to your answer, very useful!
-
Wanny Miarelli almost 6 yearsthis will broke the form functionality
-
Kartik Garasia about 5 yearsjust remove this line
force = true # Ensure that we always redirect
and add the history mode other then that this code is working file in my view js project -
Hamish Moffatt about 5 yearsDon't use force = true, because then all your other assets (including all your javascript code) also get redirected to index.html !
-
Heriberto Magaña almost 4 yearsThanks, it worked for me, even that I'm using React.js 16 :)
-
urbz over 3 yearsThank you so much for this @talves - was driving me crazy that
_redirects
did not get served correctly -
Serg.ID over 3 yearsthe answer is not relevant to the question