Vue-CLI implements multi-page multi-routed sample code

Project Download address Vue-CLI multi-page multi-routing project example: Vue + WebPack + Vue-Router + Vuex + Mock + Axios

USAGE

this is a project template for vue-cli.

GitHub found a Vue-CLI template-based Vue-CLI template-based template for a large Vue-CLI template, changed to a multi-page VUE project based on project requirements.

PC: Background Management page, separate page portal, separate route.


Mobile: Business Display Page, separate page portal, separate route.


The countless pit is finally the first time, then continues to optimize the update

Install

# Install Dependenciesnpm Install # Serve with Hot Run Dev # Build for Production with minificationnpm Run Build
  Use the NGINX server to access, the address is as follows :  
PC end http://localhost/modules/index.html

Mobile app http://localhost/modules/index.html

Multi-page configuration

Vue2.0 version multi-page portal is completed by the WebPack configuration, my project file structure is as follows

Webpack | — Build | — Config | — Dist | — Route Routing | — SRC | — API AXIOS Request | — Assets Resources | – Common Public JS Resource Directory | — Components Components | — Modules Modules | — Index Index Module | — Views Components | — Index.html | — INDEX.JS | -index.vue | — Phone Phone module | — phone.html | — phone.js | — phone.Vue | — Phone component

 Under Modules, the file name is consistent, such as:   
Modules | — INDEX | — Index.html | INDEX.JS

.vue file name is arbitrary.
  In principle, these file names can be set, but due to the definition of the following Entry entry functions, it can be found to be found. Modify the getMultientry () function accordingly if you want to do other file names.  

Until.js Add getMultientry (), depending on the GLOB plugin, you need to download well in advance, unsil.js began to introduce

// Get multi-level entry file exports.getMultientry = function (globpath) {var entries = {}, basename, tmp, pathname; glob.sync (globpath) .foreach (function) {basenaMe = path.basename (entry) Path.extName (entry); TMP = entry.split (‘/’). splice (-4); var pathsrc = tmp [0] + ‘/’ + tmp [1]; if (TMP [0] = = ‘src’) {pathsrc = TMP [1];} //console.log(Pathsrc) Pathname = pathsrc + ‘/’ + basename; // correctly output JS and HTML path ENTRIES [Pathname] = entry; // Console.log (Pathname + “——— ‘+ entry);}; return entries;}

~ \ Build \ WebPack.Base.conf.js
 Find Entry, add more portions   
Entry: Entries,

Each entry will correspond to a CHUNK when compiling. PS: Finally understand this chun’s meaning / (ㄒ o ㄒ) / ~ ~

 ~ \ build \ WebPack.dev.conf.js   
Add the following configuration at the end:

VAR Pages = Utils.getMultientry (‘./ src /’ + config.modulename + ‘/ ** / *. Html’); for (var Pathname In Pages) {// Configure the generated HTML file, defined path, etc. VAR conf = {filename: Pathname + ‘.html’, Template: pages [Pathname], // Template path Chunks: [Pathname, ‘Vendors’,’manifest’], // Each HTML reference JS module inject: true // js insertion position}; // Need to generate a few HTML files, configure several htmlwebpackplugin object module.exports.plugins.push (new htmlwebPackPlugin (CONF));}

in which config.modulename = ‘modules’

~ \ build \ WebPack.Prod.conf.js

  ... // Build an HTMLWebPackPlwebPlugin configuration that generates multi-page, mainly looped to generate var pages = utils.getMultientry ('./ src /' + config.modulename + '/ ** / * .html '); for (var pathname in pages) {var conf = {filename: Pathname +' .html ', Template: Pages [Pathname], // Template Path Chunks: ['Vendor', Pathname], // Each HTML reference JS module inject: true, // js insertion position hash: true}; webpackconfig.plugins.push (new htmlwebpackplugin (con);} Module.exports = WebPackConfig  
Where config.modulename = ‘modules’

To this, the configuration of the multi-page has been completed. The access address is: http: // localhost: 8088 / modules / index.html

phone: http: // localhost: 8088 / modules / phone.html

Browser Support
MODERN BROWSERS AND Internet Explorer 10 +.
   




MIT

The above is all the contents of this article, I hope to learn from everyone. Helped, I also hope that everyone will support Tumi Clouds.

© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment