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

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

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

выходной HTML-файл: ../главная/ресурсы/

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

и в индексе.html-файл путь, где найти активы, должен быть "js / name.js" и тому подобное.

мой текущий vue.конфиг.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. Мой вю.конфиг.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" рядом с .HTML-код у меня есть эта папка.

6
vue-cli vue.js vuejs2

1 ответов

после тестирования проблемы на моей сборке, я думаю, вам нужно два изменения:

vue.конфиг.js

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

и забудьте о плагине webpack!

Ref конфигурация: assetsDir

assetsDir

тип: строка

по умолчанию: "

каталог (относительно outputDir) в гнездо генерируемые статические активы (js, css, img, шрифты).

таким образом, активы окажутся в ../main/resources/../assets/ что составляет ../main/assets/.

расположение изображения в проект

оптимальное местоположение IMO (от тестирования) - использовать <project folder>/static старая папка CLI2 для статических ресурсов. Фактически, любая папка за пределами src будет делать. Это делает затем обрабатывается как есть, а не "webpacked".

посмотреть Обработка Статических Активы

" Реальные " Статические Активы ... Для сравнения, файлы в static/ не обрабатываются Webpack: они просто копируются в конечный пункт назначения как есть, с таким же именем.

Примечание совершенно верно, они получают хэш управления версиями (см. ниже).

это дает следующую структуру папок сборки:

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

С CLI 3 /static папка была изменена на /public/static, но если вы поместите свои изображения там,дополнительно копия сделана под ../main/resources/static.

если вы предпочитаете это место (оставаться стандартным), вы можете удалить эту копию с помощью postbuild скрипт package.json, например, с помощью npm run под окнами

пакета.в JSON

{
  ...
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "postbuild": "rd /s /q \"../main/resources/static/images\"",
    "lint": "vue-cli-service lint",
    "test:unit": "vue-cli-service test:unit"
  },
  "dependencies": {

ссылки на изображения

в исходниках, я обнаружил, что относительные ссылки на изображения работу штраф.

например, 

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

заменяется 

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

в встроенной приложения.js.

обратите внимание на хэш-добавлены версии.

обслуживание сборки

я отмечаю, что используемая вами структура папок не может обслуживаться с помощью простого http-server, как индекс.html находится в main / resources, и этот сервер не может извлекать из main / assets.

я предполагаю, что ваш механизм развертывания занимает позаботиться об этом?

1