Добавить файл перенаправления на корневой путь для Vue SPA, размещенный на Netlify
Я разрабатываю одностраничное приложение с помощью vue CLI и хочу, чтобы история pushstate работала, поэтому я получаю чистые URL-адреса.
Я должен следовать этому:https://www.netlify.com/docs/redirects/#history-pushstate-and-single-page-apps и добавьте _redirects файл в корневой каталог моего сайта со следующим:
/* /index.html 200
проблема в том, что я не знаю, как добавить это _redirects файл в корень моей папки dist. Я попытался добавить его в статическую папку, но он заканчивается в папку а не в корень. Как включить этот файл, чтобы режим истории работал после развертывания в Netlify ?
// config/index.js
build: {
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
3 ответов
vue-cli создал приложение 3.x
для новой установки сборки с использованием версии 3.0.0-beta vue-cli.x теперь есть общая папка, и вам не нужна следующая настройка. Просто положите ваш под 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 для примера.
затем вы убедитесь, что в новый root каталог или как вы его называете. В этом случае он называется root
теперь измените тег webpack.prod.conf.js CopyWebpackPlugin раздел, чтобы выглядеть следующим образом:
// 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: ['.*']
}
])
вы также можете просто использовать netlify.toml файл, который имеет тенденцию быть немного чище. Просто поместите это в файл, чтобы получить перенаправление, которое вы искали:
# The following redirect is intended for use with most SPA's that handles routing internally.
[[redirects]]
from = "/*"
to = "/index.html"
status = 200
force = true # Ensure that we always redirect
вы можете найти более подробную информацию о здесь.