One, foreword

1. SPA single-page-application

(1) Entry: Single page is only a Web page mode, only one HTML file, the whole project only one entry file.

(2) Resource loading: The resources of a single-page application are only loaded once at the initial entry (belonging to global loading), and the subsequent component jumps are not reloaded. The project initialization pressure is high.

(3) Page jump: page jump within a single page is actually vUE uses VUe-Router to realize component switch.

(4) Data transfer: data can be exchanged through global variables, parameters or store.

2. MPA multi-page-application

(1) Entry: Multi-page is the mode of multiple Web pages, with multiple HTML files, and the whole project has multiple entry files.

(2) Resource loading: resources do not affect each other between multiple pages. NPM dependency packages are installed globally, but are introduced manually in each entry file (main.js) on multiple pages as required. Resources are not shared among multiple pages, so resource reloading is required for a jump. Therefore, the project initialization pressure is small, but resources need to be reloaded for a jump between multiple pages, and the pressure is relatively large.

(3) Page hopping: inside a single page of multiple pages, components switch in the form of VUe-Router; Use the A tag to switch between multiple pages.

(4) Data transmission: the internal consistency of a single page with multiple pages is consistent with SPA; Multiple pages need to exchange data by sending parameters in the address bar.


Second, the configuration

1. Create a demo

(1) Create a project (vue create Demo) through vue-CLI 3.x and delete app. vue and main.js in the project

(2) Install path and glob dependency packages (NPM I path-d, NPM I glob -d)

2. Configure the import file

(1) Create a folder called Pages under the SRC directory for configuring multi-page modules.

(2) Create a multi-page module in the Pages folder, and click the home and Index folders in this folder.

(3) Under the multi-page module (home and index), create app. vue and main.js respectively, and fill these two files with original contents for the entrance of each page module.

<!--
 * @Date: 2020-12-01 13:53:49
 * @information: App.vue
-->
<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
}
</style>
Copy the code
/* * @Date: 2020-12-01 13:53:55 * @information: main.js */
import Vue from 'vue'
import App from './App.vue'
import router from '.. /.. /router/home'
import store from '.. /.. /store'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: (h) = > h(App),
}).$mount('#app')
Copy the code

3. Add the global startup and package configuration

(1) Create the vue.config.js configuration file in the root directory of the project

(2) Add entry declaration configuration and package configuration as follows:

/* * @Date: 2020-12-01 11:35:31 * @information: vue.config.js */
const path = require('path')
const glob = require('glob')

const titles = {
  home: 'This is the home title'.index: 'This is the index heading',}// Get the files in the pages folder
function getEntry(globPath) {
  let entries = {},
    tmp
  // Read the js file
  glob.sync(globPath + 'js').forEach(function (entry) {
    tmp = entry.split('/').splice(-3)
    entries[tmp[1]] = {
      entry,
      template: 'index.html'.filename: tmp[1] + '.html'.title: titles[tmp[1]],}})return entries
}

const htmls = getEntry('./src/pages/**/*.')

module.exports = {
  pages: htmls,
  publicPath: '/'.outputDir: 'dist'.// The packaged folder name, dist by default
  devServer: {
    open: true.hot: true.index: './index.html'.// The default startup page
    host: '0.0.0.0'.port: 8090,},productionSourceMap: false.// Whether the production environment generates the sourceMap file
}
Copy the code


Three, pay attention to climb pit

1. Project directory division

(1) The components, Router, views, Store, static data configuration layer, business layer and other file structures are strictly divided according to multi-page modules. Business coupling is not allowed between multiple pages to prevent pit entry.

(2) Introduce resources used by each page module as required to reduce module loading pressure.

2. The project directory and packed HTML file are shown in the figure

(1) the project access mode of address: [http://localhost:8090/home.html#/about] first designated to access static HTML files, add this page under the routing address.

Project Pages folder

HTML files generated by multiple pages of a packaged project