Мне нужно настроить пути вывода окончательной сборки, как описано ниже:
Мой проект 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]')
})
}
}
Теперь все работает, как я хочу, но изображения не копируются в нужную папку.
В "... / assets /" у меня есть папка css и js, но нет img папка. В "... / ressources" рядом с моим файлом index.html у меня есть эта папка.