У меня VueJS OnePageApplication на основе ASP.NET MVC.Просмотр реализован как .cshtml страница без содержимого с подключенным скриптом VueJS.Приложение, размещенное в IIS, на localhost/ksodd
.
Структура файла IIS:
wwwroot/ksodd/
- bin
- View/
- Scripts/
-- dist/
--- images/
---- search.png
--- build.js
В файле webpack.config.js у меня есть:
module.exports = {
...
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '',
...
module: {
rules: [
...
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: 'images/[name].[ext]',
publicPath: './Scripts/dist'
}
}
...
]
}
В компоненте vue:
<template>
...
<img src="../assets/images/search.png">
...
</template>
Когда приложение работает на localhost
, все работает нормально, но когда я запускаю его в IIS, как localhost/ksodd
происходит волшебство:
В Firefox образе src имеют неверный путь от корня сайта: localhost/Scripts/dist/images/search.png
.Возвращает 404.
В хромированном изображении src имеет правильный путь: localhost/ksodd/Scripts/dist/images/search.png
.Возвращает 200.
В чем причина этого и как я могу это исправить?Как сделать проект VueJS, который может работать во вложенных URL-адресах, как в корне сайта?