How to configure multi-page projects in Vue.js-JS Tutorial-php.cn

First use the following command to create a new Vue.js project

vue init webpack vue-3

Copy after login

After opening the project using VsCode, enter the project on the command line, install the relevant dependent libraries, and then run the project , execute the following command

cd vue-3npm installnpm run dev

Copy after login

When everything is normal, enter http://localhost:8080 in the browser and a page with a big V icon should pop up.

After completing the above preparations, we will next implement the configuration of the multi-page project. The effects we expect to achieve are as follows:

Enter http:// in the browser localhost:8080/admin will jump to the page showing This is the administrator login.

We create the page/login directory in the src directory of the project
Then create three new folders under the login directory: admin.html admin.js Admin.vue

Then write the corresponding page display code, where the code in
admin.html is as follows

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

Copy after login

The code in Admin.vue is as follows

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

Copy after login

admin.js The code is as follows

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;})

Copy after login

After the code for the page displayed above is completed, start the configuration work

First open the build directory
In webpack.base.conf.jsThe entry configuration property of the file plus the new entry file:

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

Copy after login

devServer in the webpack.dev.conf.js file Add redirection under 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;) },
      ],
    },

Copy after login

Also configure one more HtmlWebpackPlugin plug-in in the plugins configuration item in the file, use When generating the entry page
of admin.html, add chunks at the same time, which is used to specify the alias of the entry file corresponding to the previous 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
    }),

Copy after login

Then we find the config directory, open the index.js file inside, and add the following code under the build attribute

  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;),

Copy after login

After completing all the configuration work, re-execute npm run dev on the command line. After the project is started, type http://localhost:8080/admin in the browser and the jump will be successful. Go to the page we just wrote.

First use the following command to create a new Vue.js project

vue init webpack vue-3

Copy after login

After opening the project using VsCode, enter the project on the command line, install the relevant dependent libraries, and then run the project , execute the following command

cd vue-3npm installnpm run dev

Copy after login

When everything is normal, enter http://localhost:8080 in the browser and a page with a big V icon should pop up.

After completing the above preparations, we will next implement the configuration of the multi-page project. The effects we expect to achieve are as follows:

Enter http:// in the browser localhost:8080/admin will jump to the page showing This is the administrator login.

We create the page/login directory in the src directory of the project
Then create three new folders under the login directory: admin.html admin.js Admin.vue

Then write the corresponding page display code, where the code in
admin.html is as follows

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

Copy after login

The code in Admin.vue is as follows

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

Copy after login

admin.js The code is as follows

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;})

Copy after login

After the code for the page displayed above is completed, start the configuration work

First open the build directory
In webpack.base.conf.jsThe entry configuration property of the file plus the new entry file:

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

Copy after login

devServer in the webpack.dev.conf.js file Add redirection under 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;) },
      ],
    },

Copy after login

  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
    }),

Copy after login

Then we find the config directory, open the index.js file inside, and add the following code under the build attribute

  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;),

Copy after login

Related recommendations:

Simple example of vue-cli developing multi-page applications

Vue-cli creates single page to multi-page Method example code

How to transform Vue-cli into a history mode that supports multiple pages

The above is the detailed content of How to configure multi-page projects in Vue.js. For more information, please follow other related articles on the PHP Chinese website!