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]')
            })
    }
}

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


person Tobias Schäfer    schedule 17.07.2018    source источник
comment
Не совсем у вас проблема, но похоже, может быть, это поможет вам достичь цели - ›github .com / vuejs / vue-cli / issues / 1027.   -  person Legion    schedule 30.07.2018


Ответы (1)


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

vue.config.js

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

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

Ссылка config: assetsDir

assetsDir

Тип: строка

Дефолт: ''

Каталог (относительно outputDir) для размещения сгенерированных статических ресурсов (js, css, img, fonts) в.

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


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

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

См. Обработка статических активов.

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

Обратите внимание, что они действительно получают хэш версий (см. Ниже).

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

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

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

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

package.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

во встроенном app.js.

Обратите внимание на хэш, добавленный для управления версиями.


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

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

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

person Richard Matsen    schedule 04.09.2018
comment
классный братан (у) - person bravohex; 31.03.2021