preface
Recently, when developing cross-border e-commerce projects, we need to make an advertising page. According to the product requirements, we hope that the advertising page will be under an independent domain name, but the leaders hope that this page will be in the original project, so they think of using Vue cli multi page application. Next, we will introduce in detail the pitfalls encountered in configuring multi page applications and the details that should be paid attention to.

step 1: first take a look at the main structure of the project. If you don't understand it, you can refer to this directory structure

step 2: mainly explain the main configuration of multi page applications
1. You can use the original main.js and App.vue as the entry of the main page. The original project does not need to be moved
2. Then you need to create multiple other pages yourself. Create a pages directory under the src directory, and then create a new advertising page directory. Here is your first multi page configuration.
The configuration of advertising page.js is as follows. To put it bluntly, it is the new multi page routing entry, which is similar to the main.js of the home page

Note: the #advertising page here is the id of the corresponding Vue file below, which is the same as the id in app.vue, but sometimes carelessness will lead to mistakes in this place, so remember.

import Vue from "vue";
import advertisingPage from "./advertisingpage.vue";
import router from "../../router/adverTising.js";
import '@/assets/styles/index.scss'
Vue.config.productionTip = false;

new Vue({
router,
render: h => h(advertisingPage)
}).$mount("#advertisingPage");

Advertising page.vue is your multi page portal file, similar to the App.vue file of the home page

It should be noted here that if the routing mode of multiple pages uses the history mode, only the home page can directly enter the routing (according to my current configuration), and the sub page cannot. Therefore, I use the method of introducing components here, but you can click to jump to the routing.

However, the hash mode is normal. At present, I don't know how to configure the history mode, but I can also load components and click to jump in the build.

Some people will say that it is because of the error written in my route. There will be a detailed configuration of my route later. You can see it at a glance.

<template>
  <div id="advertisingPage">
            <!-- Note: this sub page is the one mentioned above. It has no effect to directly use it for routing, -->
        <!-- <router-view /> -->
    <propaganda></propaganda>
  </div>
</template>

<script>
import propaganda from "../../views/SeiteWerbung";
export default {
  components: {
    propaganda,
  },
  data() {
    return {};
  },
  methods: {},
};
</script>
<style lang="scss" scoped>
</style>

3. The main configuration is in vue.config.js
The pages directory here is the basic multi page configuration. You can configure as many pages as you need, but there should be supporting pages in the project with detailed notes. Just pay attention to them

Friendly tip: here, enter the history mode to refresh the small partner of page 404, please move The vue history mode refreshes the page to enter the 404 solution

module.exports = {
    publicPath: './', //The basic url when deploying the project, instead of the original Baseurl, is' / 'by default
    outputDir: 'dist', //Packaging folder when running npm run build
    assetsDir: '', //The directory (relative to outputDir) where the generated static resources (js, css, img, fonts) are placed
    indexPath: 'index.html', //Specify the generated index.html output path
    pages: {
        advertisingPage: {
            entry: "src/pages/advertisingPage/advertisingpage.js",
            template: "public/advertisingPage.html",
            filename: "advertisingPage.html",
            title: "Advertising page",
          },
        //   homePage: {
        //     entry: "src/pages/homePage/homepage.js",
        //     template: "public/homePage.html",
        //     filename: "index.html",
        //     title: "baoxiaodi official website",
        //   },
        index: {
            // page entry
            entry: 'src/main.js',
            // Template source
            template: 'public/index.html',
            // Output in dist/index.html
            filename: 'index.html',
            // When using the title option,
            // The title tag in the template needs to be < title > <% = htmlwebpackplugin. Options. Title% > < / Title >
            title: 'Wrap small delivery',
            // The blocks included in this page will be included by default
            // The extracted generic chunks and vendor chunk s.
            chunks: ['chunk-vendors', 'chunk-common', 'index']
        }
    },
    devServer: {
        host: 'localhost', //Request path
        port: '8080', //Request port, which needs to be configured when running multiple projects at the same time
        https: false,
        hotOnly: true, //Hot update
        open: false, //Start browser automatically
        // The url in the history mode will be requested to the server, but if the server does not have this resource file, it will return 404, so this item needs to be configured
        historyApiFallback: {
            index: '/index.html', //It is related to the publicPath of output (the html generated by HTMLplugin is index. html by default)
        },
    },
}
4,And then public The files in the directory are mainly matched with multiple pages html page
advertisingPage.html Page, the main attention here is the inner entrance id To be associated with the entry file of a multi page application id matching

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <!-- <link rel="icon" href="<%= BASE_URL %>logo.png"> -->
  <!-- htmlWebpackPlugin.options.title The changed wording is in the corresponding vue.config.js It is described in -->
  <title><%= htmlWebpackPlugin.options.title %></title>
</head>

<body>
  <noscript>
    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
      Please enable it to continue.</strong>
  </noscript>
 there id Must be`advertisingPage.vue`The name of the container for the file id,Don't forget the content here
  <div id="advertisingPage"></div>
  <!-- built files will be auto injected -->
</body>
</html>

5. Finally, configure the corresponding multi page route in router / advertising page.js
import Vue from "vue";
import VueRouter from "vue-router";
import home from "../views/advertising.vue";

Vue.use(VueRouter);

const routes = [{
path: "/",
name: "advertising",
component: advertising
},
];
The multi page history mode mentioned above cannot directly enter the router view and route, but the hash mode can
const router = new VueRouter({
mode: "history",
base: process.env.BASE_URL,
routes
});

export default router;
step 3: run the project and visit
1. You can access the main page of main.js through normal connection
2. To access advertising page, you need to follow advertising page.html behind your path
http://localhost:8080/advertisingPage.html
This is the path, so that you can access the route to the sub page of multiple pages.

3. If it belongs to the same single page, you can use vueRouter to jump normally, but if it does not belong to the same single page, you need to use window.location.href or secondview Let's jump.
4. Execute npm run build, and you will find many html files matching multiple pages you configured before in the dist folder.

Link: https://www.jianshu.com/p/010ff118743a
Source: Jianshu