current position:Home>Building multi page applications with Vue cli 3.0

Building multi page applications with Vue cli 3.0

2021-08-25 02:01:39 Natural stay**

background

In practice , There are differences between different businesses H5 Jump , Due to jump h5 There are many scenes , So I want to use vue To build multiple project applications .

Let me talk about how to develop multi page Vue application , And the problems encountered in this process .

 

preparation

For local use vue-cli Create a new project , This step vue It's on our website , I won't say it anymore .

Here's a place that needs to be changed , In execution npm install Before the command , stay package.json Add a dependency to the , We'll use that later .

 

modify webpack To configure

Here is my project directory

    ├── package.json
    ├── README.md
    ├── vue.config.js
    ├── vue.util.js
    ├── public
    │   ├── index.html
    │   ├── logo.ico
    ├── src
    │   ├── assets    
    │   ├── components
    │   ├── pages
    │   │   ├── communityGroup
    │   │   │   ├── app.vue
    │   │   │   ├── communityGroup.html
    │   │   │   ├── communityGroup.js
    │   │   │   ├── logo.ico
    │   │   │   ├── router.js
    │   │   │   ├── searchStore
    │   │   │   │   ├── index.vue
    │   │   │   ├── storeList
    │   │   │   │   ├── index.vue
    │   │   │   ├── submitSuccess
    │   │   │   │   ├── index.vue
    │   │   │   ├── userInfo
    │   │   │       ├── index.vue
    │   │   ├── communityhead
    │   │   ├── jump-mp
    │   │   ├── member
    │   ├── store
    │   │    ├── index.js
    │   │ 

The files we need to change in this step are :

  • vue.utils.js
  • vue.config.js

I will release the complete contents of the documents in order , Then mark out the modified or added position with an annotation :

vue.util.js file

const path = require('path')
const glob = require('glob')   //nodejs Of glob
const startPath = '/src/pages/'
const pagePath = path.resolve(__dirname, '.' + startPath)

exports.pages = function () {   // Generate corresponding directory html、js
  let entryFiles = glob.sync(pagePath + '/**/*.html')   // Use file path 
  let obj = {}
  entryFiles.forEach(filePath => {
    let dirPath = filePath.substring(0, filePath.lastIndexOf('/'))
    let dirName = dirPath.substring(dirPath.lastIndexOf('/') + 1)
    let filename = filePath.substring(filePath.lastIndexOf(startPath) + startPath.length, filePath.lastIndexOf('/'));
    if (filename.endsWith(dirName)) {
      obj[filename] = {
        entry: filePath.substring(0, filePath.lastIndexOf('.html')) + '.js',
        template: filePath.substring(0, filePath.lastIndexOf('.html')) + '.html'
      }
    }
  })
  return obj  
 
}

  

vue.config.js file

Be careful vue.util.js File introduction and pages

const utils = require('./vue.util')   // Multi page file introduction 
const path = require('path');
function resolve (dir) {
    return path.join(__dirname, dir)
}
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const isProduction = process.env.NODE_ENV === 'production'
module.exports = { 
	pages: utils.pages(), //  Multi page configuration 
        publicPath: '/', //  Deploy production environment and development environment URL: The current environment can be distinguished 
        lintOnSave: false, //  Whether to save the code eslint testing 
  	productionSourceMap: false, //  Is it generated when building the production package sourceMap file ,false Will speed up the build 
  	devServer: { // webpack-dev-server  Related configuration 
	    port: '8090', //  Port number 
	    https: false, //  close https
	    hotOnly: false, //  Cancel hot update 
	    // proxy: { //  Using agents 
	    //   '/api': {
	    //      target: 'qdama.cn', //  Destination proxy address 
	    //     changeOrigin: true, //  Allow cross-domain 
	    //     pathRewrite:{
	    //       '^/api': '' //  Rewrite path , If you need to set rewriting , Add... Before the subsequent calling interface /api Instead of target
	    //     }
	    //   }
	    // } 
    },
    chainWebpack: (config)=>{
    	//  remove  prefetch  plug-in unit 
    	config.plugins.delete('prefetch'),
        config.resolve.alias
            .set('@', resolve('src'))
            .set('assets',resolve('src/assets'))
            .set('components',resolve('src/components'))
    },
	// webpack Manual configuration 
	configureWebpack: (config) => {
		if (isProduction) {
			//  Cancel webpack Warning performance tips 
			config.performance = {
		      	hints: 'error',
		      	maxAssetSize: 3000000, //  The maximum volume of the generated file , Integer types ( In bytes )
		      	maxEntrypointSize: 5000000, //  The maximum volume of the starting point of the entrance , Integer types ( In bytes )
            	        assetFilter: function(assetFilename) { //  Just give js File performance tips 
          			return assetFilename.endsWith('.js')
			}
		  }
		}
    }
}

thus ,webpack The multi page configuration is over . 

But it's not over yet , Let's continue to talk about the file structure of the project .

It's a lot of h5 A jump scene in the project (communityGroup), What needs to be noted here is Directory name 、communityGroup.html and communityGroup.js Consistent naming , In the main package communityGroup.js To complete the module and its project mounting required for the introduction , Equivalent to... In a single page application app.vue

├── src
    │   ├── assets    
    │   ├── components
    │   ├── pages
    │   │   ├── communityGroup
    │   │   │   ├── app.vue
    │   │   │   ├── communityGroup.html
    │   │   │   ├── communityGroup.js
    │   │   │   ├── qdamalogo.ico
    │   │   │   ├── router.js
    │   │   │   ├── searchStore
    │   │   │   │   ├── index.vue
    │   │   │   ├── storeList
    │   │   │   │   ├── index.vue
    │   │   │   ├── submitSuccess
    │   │   │   │   ├── index.vue
    │   │   │   ├── userInfo
    │   │   │       ├── index.vue
    │   │   ├── communityhead
    │   │   ├── jump-mp
    │   │   ├── member
    │   ├── store
    │   │    ├── index.js
    │   │ 

Then start npm run build Try packaging file deployment , It's almost there , Simple multi page configuration is ok La !

This is where I put it GitHub Project on , There is the whole configuration file , You can see : Multi page application

copyright notice
author[Natural stay**],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210825020135831n.html

Random recommended