Vue Cli 3: определенные пути вывода

Мне нужно настроить пути вывода окончательной сборки, как описано ниже:

Мой проект Vue по умолчанию является структурой, но пути вывода выходят за пределы этой структуры:

Выходной HTML-файл: ../main/resources/

Вывод всех файлов активов: ../main/assets/[js/css/img]

И в файле index.html путь, по которому можно найти ресурсы, должен быть «js / name.js» и т.п.

Мой текущий vue.config.js этого не обеспечивает:

module.exports = {
    chainWebpack: config => {
        config.module
            .rule('vue')
            .use('vue-loader')
            .tap(options => {
                return options;
            });
    },
    css: {
        sourceMap: true
    },


    baseUrl: '/',
    outputDir: '../main/resources/',
    assetsDir: '../main/assets/',
    runtimeCompiler: undefined,
    productionSourceMap: undefined,
    parallel: undefined,
    configureWebpack: {
        module: {
            rules: [
                {
                    test: /\.(png|jpg|gif)$/,
                    use: [
                        {
                            loader: 'file-loader',
                            options: {
                                outputPath: '../main/assets/img',
                                name: '../main/assets/img/[name].[ext]'
                            }
                        }
                    ]
                }
            ]
        }
    }
}

Может кто поможет настроить этот файл? Спасибо!
С уважением
tschaefermedia

Извините, я был занят другими проектами. Теперь вернемся к VueJS.
Обновлено:
Я пробовал то, что было указано в сообщениях GIT. Мои файлы vue.config.js теперь выглядят так:

const path = require('path');
module.exports = {
    css: {
        sourceMap: true
    },

    devServer: {
        proxy: {
            '/api': {
                target: 'http://localhost:8080',
                'changeOrigin': true,
                'secure': false
            }
        }
    },
    baseUrl: '',
    outputDir: '../main/resources/',
    assetsDir: '../main/assets/',
    chainWebpack: config => {
        config.module
            .rule('vue')
            .use('vue-loader')
            .tap(options => {
                return options
            })
        config.module
            .rule('images')
            .test(/\.(png|jpe?g|gif|ico)(\?.*)?$/)
            .use('url-loader')
            .loader('url-loader')
            .options({
                name: path.join('../main/assets/', 'img/[name].[ext]')
            })
    }
}

Теперь все работает, как я хочу, но изображения не копируются в нужную папку. В ".../ресурсы/" у меня есть папка css и js, но нет папки img. В "... / ressources" рядом с моим файлом index.html у меня есть эта папка.