Comment configurer des projets multipages dans Vue.js-js tutoriel-php.cn

Utilisez d'abord la commande suivante pour créer un nouveau projet Vue.js

vue init webpack vue-3

Copier après la connexion

Après avoir ouvert le projet à l'aide de VsCode, entrez le projet sur la ligne de commande, installez les bibliothèques dépendantes appropriées et puis exécutez le projet et exécutez la commande suivante

cd vue-3npm installnpm run dev

Copier après la connexion

Quand tout est normal, saisissez http://localhost:8080 dans le navigateur et une page avec une grande icône V devrait apparaître.

Après avoir terminé les préparatifs ci-dessus, nous mettrons ensuite en œuvre la configuration du projet multipage. Les effets que nous espérons obtenir sont les suivants :

Entrez http:// dans. le navigateur localhost:8080/admin passera à la page affichant Ceci est la connexion de l'administrateur .

On crée le répertoire page/login dans le répertoire src du projet
puis on crée trois nouveaux dossiers sous le répertoire login : admin.html admin.js Admin.vue

Ensuite on écrit le code d'affichage de la page correspondant , où Le code dans
admin.html est le suivant

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>管理员登录页面</title></head><body>
    <p id="admin"></p></body></html>

Copier après la connexion

Le code dans Admin.vue est le suivant

<template>
  <p id="admin">
      <p>这里是管理员登录页面</p>
  </p></template><script>export default {
  name: &#39;Admin&#39;}</script>

Copier après la connexion

Le code dans admin.js est le suivant

import Vue from &#39;vue&#39;import Admin from &#39;./Admin.vue&#39;Vue.config.productionTip = false/* eslint-disable no-new */new Vue({
  el: &#39;#admin&#39;,
  components: { Admin },
  template: &#39;<Admin/>&#39;})

Copier après la connexion

Une fois le code de la page ci-dessus terminé, démarrez le travail de configuration

Ouvrez d'abord le build répertoire
et ajoutez un nouveau fichier d'entrée au webpack.base.conf.js attribut de configuration du fichier entry :

module.exports = {  context: path.resolve(__dirname, &#39;../&#39;),  entry: {    app: &#39;./src/main.js&#39;,    admin: &#39;./src/page/login/admin.js&#39;
  },

Copier après la connexion

Ajouter une redirection vers webpack.dev.conf.js sous devServer dans le fichier rewrites :

  devServer: {    clientLogLevel: &#39;warning&#39;,
    historyApiFallback: {
      rewrites: [
        { from: /.admin/, to: path.posix.join(config.dev.assetsPublicPath, &#39;src/indexlogin/admin.html&#39;) },        { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, &#39;index.html&#39;) },
      ],
    },

Copier après la connexion

Configurez également un autre plugins dans l'élément de configuration HtmlWebpackPlugin du fichier >Plug-in, permet de générer la page d'entrée de admin.html
et d'ajouter chunks en même temps, permet de préciser l'alias du fichier d'entrée correspondant au précédent entry.

  plugins: [    new webpack.DefinePlugin({      &#39;process.env&#39;: require(&#39;../config/dev.env&#39;)
    }),    new webpack.HotModuleReplacementPlugin(),    new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.    new webpack.NoEmitOnErrorsPlugin(),    // https://github.com/ampedandwired/html-webpack-plugin    new HtmlWebpackPlugin({      filename: &#39;index.html&#39;,      template: &#39;index.html&#39;,      chunks:[&#39;app&#39;],      inject: true
    }),    new HtmlWebpackPlugin({      filename: &#39;src/page/login/admin.html&#39;,      template: &#39;src/page/login/admin.html&#39;,      chunks:[&#39;admin&#39;],      inject: true
    }),

Copier après la connexion

Ensuite, nous trouvons le répertoire config, ouvrons le fichier index.js à l'intérieur et ajoutons le code suivant sous l'attribut build

  build: {    // Template for index.html    index: path.resolve(__dirname, &#39;../dist/index.html&#39;),
    admin: path.resolve(__dirname, &#39;../dist/src/page/login/admin.html&#39;),

Copier après la connexion

Terminé tout ce qui précède Pour configurer le travail, réexécutez npm run dev sur la ligne de commande. Une fois le projet démarré, tapez http://localhost:8080/admin dans le navigateur, et il passera avec succès à la page que nous venons d'écrire. .

Utilisez d'abord la commande suivante pour créer un nouveau projet Vue.js

vue init webpack vue-3

Copier après la connexion

cd vue-3npm installnpm run dev

Copier après la connexion

Quand tout est normal, saisissez http://localhost:8080 dans le navigateur et une page avec une grande icône V devrait apparaître.

Après avoir terminé les préparatifs ci-dessus, nous mettrons ensuite en œuvre la configuration du projet multipage. Les effets que nous espérons obtenir sont les suivants :

Entrez http:// dans. le navigateur localhost:8080/admin passera à la page affichant Ceci est la connexion de l'administrateur .

On crée le répertoire page/login dans le répertoire src du projet
puis on crée trois nouveaux dossiers sous le répertoire login : admin.html admin.js Admin.vue

Ensuite on écrit le code d'affichage de la page correspondant , où Le code dans
admin.html est le suivant

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>管理员登录页面</title></head><body>
    <p id="admin"></p></body></html>

Copier après la connexion

Le code dans Admin.vue est le suivant

<template>
  <p id="admin">
      <p>这里是管理员登录页面</p>
  </p></template><script>export default {
  name: &#39;Admin&#39;}</script>

Copier après la connexion

Le code dans admin.js est le suivant

import Vue from &#39;vue&#39;import Admin from &#39;./Admin.vue&#39;Vue.config.productionTip = false/* eslint-disable no-new */new Vue({
  el: &#39;#admin&#39;,
  components: { Admin },
  template: &#39;<Admin/>&#39;})

Copier après la connexion

Une fois le code de la page ci-dessus terminé, démarrez le travail de configuration

Ouvrez d'abord le build répertoire
et ajoutez un nouveau fichier d'entrée au webpack.base.conf.js attribut de configuration du fichier entry :

module.exports = {  context: path.resolve(__dirname, &#39;../&#39;),  entry: {    app: &#39;./src/main.js&#39;,    admin: &#39;./src/page/login/admin.js&#39;
  },

Copier après la connexion

Ajouter une redirection dans le webpack.dev.conf.js sous le devServer du fichier rewrites :

  devServer: {    clientLogLevel: &#39;warning&#39;,
    historyApiFallback: {
      rewrites: [
        { from: /.admin/, to: path.posix.join(config.dev.assetsPublicPath, &#39;src/indexlogin/admin.html&#39;) },        { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, &#39;index.html&#39;) },
      ],
    },

Copier après la connexion

Configurer également une plus <🎜 dans l'élément de configuration plugins du fichier >Plug-in, utilisé pour générer la page d'entrée de admin.html HtmlWebpackPlugin et ajouter
en même temps, utilisé pour spécifier l'alias du fichier d'entrée correspondant au précédent chunks. entry

  plugins: [    new webpack.DefinePlugin({      &#39;process.env&#39;: require(&#39;../config/dev.env&#39;)
    }),    new webpack.HotModuleReplacementPlugin(),    new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.    new webpack.NoEmitOnErrorsPlugin(),    // https://github.com/ampedandwired/html-webpack-plugin    new HtmlWebpackPlugin({      filename: &#39;index.html&#39;,      template: &#39;index.html&#39;,      chunks:[&#39;app&#39;],      inject: true
    }),    new HtmlWebpackPlugin({      filename: &#39;src/page/login/admin.html&#39;,      template: &#39;src/page/login/admin.html&#39;,      chunks:[&#39;admin&#39;],      inject: true
    }),

Copier après la connexion

Ensuite, nous trouvons le répertoire

, ouvrons le fichier config à l'intérieur et ajoutons le code suivant sous l'attribut index.js build

  build: {    // Template for index.html    index: path.resolve(__dirname, &#39;../dist/index.html&#39;),
    admin: path.resolve(__dirname, &#39;../dist/src/page/login/admin.html&#39;),

Copier après la connexion

Terminé tout ce qui précède Pour configurer le travail, réexécutez

sur la ligne de commande. Une fois le projet démarré, tapez http://localhost:8080/admin dans le navigateur, et il passera avec succès à la page que nous venons d'écrire. . npm run dev

Recommandations associées :

Un exemple simple de développement d'une application multipage avec vue-cli

Vue-cli crée un seul page en plusieurs pages Exemple de code de méthode

Comment transformer Vue-cli en un mode historique prenant en charge plusieurs pages

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!