vuecli3中src的文件_vue.js – Vue Cli 3：定义的输出路径

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

我的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”中,我有这个文件夹.