Fichiers de configuration de l'environnement

Vue d'ensemble

Après la création du projet et l'installation des dépendances, vous trouvez les fichiers de configuration de l'environnement suivants à la racine :

package.json

Ce fichier contient les informations descriptives du projet (nom, version, configuration), la liste des dépendances nécessaires, ainsi que les scripts npm permettant d'automatiser certaines tâches comme lancer le serveur de développement, créer un build de production ou tester l'application. Il est créé automatiquement lors de la génération du projet avec npm create vue@latest. Les dépendances qui y sont listées sont installées lorsque l'on exécute npm install, car npm consulte ce fichier pour savoir quelles bibliothèques télécharger et quelles versions utiliser.

Exemple de contenu :


                {
                    "name": "mon-projet",
                    "version": "0.0.0",
                    "private": true,
                    "type": "module",
                    "engines": {
                        "node": "^20.19.0 || >=22.12.0"
                    },
                    "scripts": {
                        "dev": "vite",
                        "build": "vite build",
                        "preview": "vite preview"
                    },
                    "dependencies": {
                        "vue": "^3.5.18"
                    },
                    "devDependencies": {
                        "@vitejs/plugin-vue": "^6.0.1",
                        "vite": "^7.0.6",
                        "vite-plugin-vue-devtools": "^8.0.0"
                    }
                }

vite.config.js

Fichier de configuration de Vite. Il permet de personnaliser le comportement de l'outil (ajout de plugins comme Vue, configuration d'alias de chemins, options de build, etc.). Ce fichier est automatiquement lu par Vite lorsqu'on exécute une commande qui le lance, comme npm run .... 


                import { fileURLToPath, URL } from 'node:url'

                import { defineConfig } from 'vite'
                import vue from '@vitejs/plugin-vue'
                import vueDevTools from 'vite-plugin-vue-devtools'

                // https://vite.dev/config/
                export default defineConfig({
                plugins: [
                    vue(),
                    vueDevTools(),
                ],
                resolve: {
                    alias: {
                    '@': fileURLToPath(new URL('./src', import.meta.url))
                    },
                },
                })

jsconfig.json

Fichier de configuration lu par certains éditeurs comme VS Code pour améliorer l'expérience de développement. Il ne change pas directement le fonctionnement du code dans le navigateur ou dans Node.js, mais sert à fournir une auto-complétion plus précise, une navigation rapide dans les fichiers et une meilleure détection des erreurs.

Exemple de contenu :


            {
                "compilerOptions": {
                    "paths": {
                        "@/*": ["./src/*"]
                    }
                },
                "exclude": ["node_modules", "dist"]
            }