VueCli3:定义的输出路径

我需要配置最终构建的输出路径,如下所述:

我的Vue项目默认来自结构,但输出路径在此结构之外:

输出HTML文件是: ../ main/resourcess /

输出所有资产文件: ../ 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]')
            })
    }
}

现在一切正常,正如我想要的那样,但图像不会被复制到正确的文件夹中.
在".../assets /"中我有css和js文件夹但没有img文件夹.在我的index.html文件旁边的".../ressources"中,我有这个文件夹.

在我的构建中测试了问题之后，我认为您需要进行两项更改：

vue.config.js

module.exports = {
  ...
  outputDir: '../main/resources/',
  assetsDir: '../assets/',
  ...
}

../main
  assets/
    css/
    fonts/
    images/
    js/
  resources/
    index.html

../main
  assets/
    css/
    fonts/
    images/
    js/
  resources/
    index.html

import myPic from '../public/static/images/myPic.png'

../assets/img/myPic.ec4d96e7.png