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.
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!
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?