1. Vue.config. js multi-page configuration is added

Vue official website reference document

let glob = require('glob')

// Configure pages multiple pages to get HTML and JS in the current folder

function getEntry(globPath) {

 let entries = {},

  basename, tmp, pathname, appname;



 glob.sync(globPath).forEach(function (entry) {

  basename = path.basename(entry, path.extname(entry));

  // console.log(entry)

  tmp = entry.split('/').splice(- 3);

  // console.log(tmp)

  pathname = basename; // The correct path to output js and HTML



  // console.log(pathname)

  entries[pathname] = {

   entry: 'src/' + tmp[0] + '/' + tmp[1] + '/' + tmp[1] + '.js'.

   template: 'src/' + tmp[0] + '/' + tmp[1] + '/' + tmp[2].

   title: tmp[1].

   filename: tmp[2].

   // chunks: [tmp[1]],

   cdn: process.env.NODE_ENV === 'production' ? cdn.build : cdn.dev

  };

 });

 return entries;

}



let pages = getEntry('./src/module/**? /*.html');// Multipage package directory

// console.log(pages)

Copy the code

2. The CDN

From the above code, we can see that glob is used to query the directory, and then htML-webpack-plugin is used to create multi-page HTML files.

Vue official website reference document

Html-webpack-plugin configuration option

What we need to do now is to add a custom option CDN, which is passed to the HTML-webpack-plugin to automatically add links to the CSS and JS files we need at compile time.

const cdn = {

 // Development environment

 dev: {

  css: [].

  js: [

   / / https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js,

   / / 'https://cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js'

  ]

 },

 // Production environment

 build: {

  css: [].

  js: [

   'https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js'.

   'https://cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js'

  ]

 }

}

Copy the code

3. Configure CDN for HTML files 

<! -- CDN accelerated CSS file, configured in vue.config.js -->

<% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.css) { %>

    <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="preload" as="style" />

    <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet" />

<%} % >

<! -- Use CDN accelerated JS file, configure in vue.config.js -->

<% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>

    <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>

<%} % >

Copy the code

4. The production environment excludes dependencies

Webpack official website reference documentation

// The externals module is not packaged

Object.assign(config, {

  externals: {

    vue: 'Vue'.

    axios: 'axios'

  }

})

Copy the code

5. Other references

Compiler mode and Runtime mode for Vue

JSP sample document