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

Question

I am developing a one-page application using the Vue CLI and want pushstate stories to work so that I get clean URLs.

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

/*    /index.html   200

The problem is that I do not know how to add this file _redirectsto the root of my dist folder. I tried to add it to a static folder, but it ended up in a subfolder, not the root. How can I include this file so that the history mode works after deployment on Netlify?

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

Answer 1

vue-cli 3.x

vue-cli 3.0.0-beta.x , . _redirects public . dist, .

vue-cli 3.x

Vue.js webpack . webpack.prod.conf.js , Netlify. , .

new CopyWebpackPlugin webpack.prod.conf.js.

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

( , ). , root.

, _redirects root . root

webpack.prod.conf.js webpack.prod.conf.js , :

// 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: ['.*']
  }
])

Answer 2

netlify.toml . , , :

# The following redirect is intended for use with most SPA that handles routing internally.
[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200
  force = true # Ensure that we always redirect

netlify.toml .

Answer 3

_redirects /public vue

Answer 4

, . .

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200