web-dev-qa-db-fra.com

Vue Cli 3: chemins de sortie définis

J'ai besoin de configurer les chemins de sortie de la version finale comme décrit ci-dessous: 

Mon projet Vue est la structure par défaut mais les chemins de sortie sont en dehors de cette structure: 

Le fichier HTML de sortie est: ../main/resources/

Sortie de tous les fichiers d'actif: ../main/assets/[js/css/img]

Et dans le fichier index.html, le chemin où trouver les actifs doit être "js/name.js" et similaire. 

Mon vue.config.js actuel ne fournit pas ceci:

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

Quelqu'un peut aider à configurer ce fichier? Je vous remercie!
Cordialement
tschaefermedia

Désolé, j'étais occupé avec d'autres projets. Revenons maintenant à VueJS.
METTRE À JOUR:
J'ai essayé ce qui était indiqué dans les messages du GIT. Mes fichiers vue.config.js ressemblent maintenant à ceci: 

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

Tout fonctionne maintenant, comme je le souhaite, mais les images ne sont pas copiées dans le bon dossier.
Dans ".../assets /", j'ai les dossiers css et js mais pas de dossier img. Dans ".../ressources" à côté de mon fichier index.html, j'ai ce dossier. 

vue.jsvuejs2vue-cli
6
tschaefermedia

Après avoir testé le problème sur ma version, je pense que deux modifications sont nécessaires:

vue.config.js

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

et oubliez le plugin webpack!

Réf config: assetsDir

assetsDir 

Type: chaîne

Défaut: ''

Un répertoire (par rapport à outputDir) pour imbriquer les actifs statiques générés (js, css, img, polices) sous.

donc les actifs se retrouveront dans ../main/resources/../assets/, ce qui équivaut à ../main/assets/.

Emplacement de l'image dans le projet

L'emplacement optimal IMO (d'après les tests) consiste à utiliser <project folder>/static, qui est l'ancien dossier CLI2 pour les ressources statiques. En fait, tout dossier en dehors de src fera l'affaire. Cela rend ensuite géré tel quel plutôt que 'webpacké'. 

Voir Gestion des actifs statiques

"Réels" actifs statiques ... En comparaison, les fichiers contenus dans static/ ne sont pas du tout traités par Webpack: ils sont directement copiés tels quels dans leur destination finale, avec le même nom.

Notez tout à fait vrai, ils obtiennent un hachage de versioning (voir ci-dessous).

Cela donne la structure de dossier de construction suivante:

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

Avec la CLI 3, le dossier /static a été remplacé par /public/static, mais si vous y placez vos images, une copie supplémentaire est créée sous ../main/resources/static. 

Si vous préférez cet emplacement (pour rester standard), vous pouvez supprimer cette copie avec un script postbuild dans package.json, en utilisant par exemple npm run sous 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": {

Références d'image

Dans la source, j'ai trouvé que les références d'image relatives fonctionnent bien. 

Par exemple, 

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

se change en 

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

dans les app.js. construit 

Notez le hash ajouté pour la gestion des versions.

Servir la construction

Je remarque que la structure de dossiers que vous utilisez ne peut pas être servie avec un simple http-server, car index.html est dans main/resources et ce serveur ne peut pas extraire de main/assets.

Je suppose que votre mécanisme de déploiement prend soin de cela?

1
Richard Matsen