Said in front

Recently, the company has a need to nest H5 pages in the project, and there is more than one nested page, so try to use the multi-entry and multi-exit packaging mode of Webpack, online checked a lot of information, there are multi-entry and multi-exit cases, github also has the corresponding source code, I will not do too much explanation. Here to blog out vUE multi – entry multi – export packaging, the corresponding multi – entry multi – export source code here. Vue2. X + webpack3. X integration of multi-entrance and multi-exit, interested partners can have a look.

However, the leader of the company required the integration of TS in the project for development, so as to have better control over the type of fields, so on the premise of cooperating with multiple entrances and multiple exits, we need to cooperate with TS to further make some adjustments. My own development path may be early to go wild, but after adding tsLint, a lot of type checking, syntax trouble, can not adapt to the development. The little girl had to obey. So we made a set of ts on the basis of Webpackage 3.x, and realize multiple entrance and multiple exit. At that time, time was tight. Upgrading webpack3.x to Webpack 4.x still encountered some difficulties in implementation. So there was no further study.

I just quit my job recently, and I feel that webPackage 4.x has been released for more than a year, and I have not been in the actual combat of the project, which is not a qualified front end. I finally decided to point (hua) on WebPackage 4.x.

This article doesn’t explain TS, but if you want to use TS for multi-entry development, head over to the typescript documentation and read the classics. Without further ado, let’s move on to the main body:

Some installation vuE-CLI3 operation, how to initialize a project here do not explain, because I think many articles on the Internet are very detailed, I think there is no need to rewrite a copy, also please search for yourself.

Since I’m writing multientry multiexit with TS, typescript is already installed when I initialize the project.

Create multi-page files

My page structure is as follows

Rewrite the file

// login.ts
import Vue from 'vue';
import Login from './login.vue';
import router from '.. /.. /router';

Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
  router,
  render: h => h(Login),
}).$mount('#login');
Copy the code

In the login.ts file, the main. Js entry of the single page of login. HTML, I encountered a pit, which is that if I do not change the form of render, no error is reported, but the page is not rendered.

// login.vue
<template>
<div class="login">
  {{msg}}
  <router-view></router-view>
</div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

@Component
export default class Login extends Vue {
  private msg = 'login';
}
</script>

<style>

</style>

Copy the code

Vue-property-decorator is a plug-in wrapped in VUE using typescript that relies on vue-class-Component. Vue3 is said to be natively compatible with TS.

// login.html <! DOCTYPE html> <html> <head> <meta charset="utf-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>vue_multi</title>
  </head>
  <body>
    <div id="login"></div> <! -- built files will be auto injected --> </body> </html>Copy the code

There is nothing to be said for HTML, and other pages should be created in the same way. Nothing to say.

Create vue.config.js under the root directory

In vue-cli3, the configuration of Webpack is no longer exposed. If you want to customize the configuration, you need to manually create vue.config.js in the root directory.

// glob is a third party module that webpack installation relies on. It also allows you to use * symbols, such as lib/*.js to get all the js extensions in the lib folderlet glob = require("glob");
let merge = require("webpack-merge");

let page = function() {
  let entryHtml = glob.sync("src/views" + "/*/*.html"); // In vue-cli3, the configuration file path does not need to add relative path, nor need to find absolute pathlet obj = {};
  entryHtml.forEach(filePath => {
    let filename = filePath.substring(filePath.lastIndexOf("/") + 1, filePath.lastIndexOf("."));
    let entryname = filePath.substring(0, filePath.lastIndexOf(".")); // I just overwrite the suffix to make the HTML path easier to uselet conf = {
      entry: entryname + '.ts'Template: filePath, // Filename: filename + is the HTML file access path".html",
      chunks: ["chunk-vendors"."chunk-common", filename],
    };
    if (process.env.NODE_ENV === "production") {
      conf = merge(conf, {
        minify: {
          removeComments: true,
          collapseWhitespace: true,
          removeAttributeQuotes: true
        },
        chunksSortMode: "dependency"
      });
    }
    obj[filename] = conf
  });
  return obj;
};

module.exports = {
  publicPath: '/'The default directory is the root directory. You can configure outputDir by yourself:'dist'Pages: page(), productionSourceMap:false,
  devServer: {
    open: true// After the project is successfully constructed, the automatic pop-up page host:'localhost', / / host name, also can 127.0.0.0 | | when do the real machine test 0.0.0.0 port: 8081, / / port, the default 8080}}Copy the code

This completes our vuE-cli3 + typescript + multiple entry and multiple exit. After writing, I found, oh my God, it’s almost 3am, I’m going to bed, Gurnai (😊)

The last

Add project source code, can be a fierce dig here I was to see in my a search, and did not see like vue-CLI3 + TS integration multi-page article, so I hope it will be helpful to you. Technical articles are timely, but if I’m not lazy, I’ll update them from time to time. Than the heart! Gently, please. I’m a new driver. Feel free to comment if you have a better idea, opinion or error.