Pièges rencontrés dans les opérations et solutions réelles du projet Vue

Pit 1. Un problème de chargement des ressources 404 se produit lors de l'accès à index.html après l'empaquetage avec webpack

Solution résolue  : Dans index.js dans config, le niveau de l'attribut assetsPublicPath dans l'objet de construction doit être ajusté de '/' à './ '

 1  build: { 2     env: require('./prod.env'), 3     index: path.resolve(__dirname, '../dist/index.html'), 4     assetsRoot: path.resolve(__dirname, '../dist'), 5     assetsSubDirectory: 'static', 6     assetsPublicPath: './', 7     productionSourceMap: false,12     productionGzip: false,13     productionGzipExtensions: ['js', 'css'],18     bundleAnalyzerReport: process.env.npm_config_report19   }

 1 dev: { 2     env: require('./dev.env'), 3     port: 8080, 4     autoOpenBrowser: true, 5     assetsSubDirectory: 'static', 6     assetsPublicPath: '/', 7     proxyTable: {}, 8     // CSS Sourcemaps off by default because relative paths are "buggy" 9     // with this option, according to the CSS-Loader README10     // ()11     // In our experience, they generally work as expected,12     // just be aware of this issue when enabling this option.13     cssSourceMap: false14   }

Raison :

environnement de développement statique Le dossier est basé sur le répertoire racine, utilisez donc '/' directement. Par exemple, ce format : http://localhost:8080/static/img/logo.png.

Tout le monde doit savoir que l'empaquetage webpack empaquetera automatiquement le dossier statique. Par défaut, un dossier dist sera généré en tant que répertoire racine du fichier d'environnement de production, et le dossier statique sera généré dans dist. Le format généré doit donc être http://localhost:8080/dist/static/img/logo.png. Il n'est pas basé sur le répertoire racine, donc '/' ne doit pas pouvoir trouver la ressource correspondante.

Présentez la signification de ces attributs :

assetsRoot : le chemin du dossier cible de la sortie du webpack

assetsSubDirectory : le deuxième niveau du dossier de sortie compilé du webpack

assetsPublicPath : Le chemin de publication de la sortie compilée du webpack, par exemple : /eat dans www.woshichihuo.com/eat est ce chemin

Pit 2. Utiliser webpack après emballage, un écran blanc apparaît lors de l'accès à index.html localement, et les ressources sont chargées normalement

Solution : Ne définissez pas le mode de configuration du routage sur le mode historique. La valeur par défaut est le hachage. Dans le fichier index.js sous le dossier du routeur.

1 const router = new Router({2   // mode: 'history',3   routes: [4     index,5     home6   ]7 })

Si vous avez besoin du mode historique, veuillez vous référer à la documentation officielle de vue-router :

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!