vue多页面应用的动态配置

向右看齐 2023-03-13 06:43 236阅读 0赞

vue结合webpack构建多页面应用时，若一个个页面配置显然过于繁琐。这里我们以示例介绍下多页面应用如何实现动态配置。

### 一：src目录下建pages文件夹，将所有页面放在pages目录下 ###

![在这里插入图片描述][20200512165605436.png]

### 二、创建scanner.js文件，用于动态遍历pages子目录，以获取entry入口文件对象 和 html-webpack-plugin实例数组 ###

遍历pages目录下的所有孙辈js和html，以其父目录（即pages子目录）命名js和html。

**scanner.js文件**：

const path = require('path')
    const glob = require('glob')
    const HtmlWebpackPlugin = require('html-webpack-plugin')
    const PAGE_PATH = path.resolve(__dirname, '../src/pages')
    const merge = require('webpack-merge')
    
    const baseDir = filePath => path.basename(path.dirname(filePath))
    
    exports.entries = () => {
        var entryFiles = glob.sync(PAGE_PATH + '/*/*.js')
        var map = {}
        entryFiles.forEach((filePath) => {
            var filename = baseDir(filePath)
            map[filename] = filePath
        })
        return map
    }
    
    exports.htmlPlugin = () => {
        let entryHtml = glob.sync(PAGE_PATH + '/*/*.html')
        let arr = []
        console.log('扫描到如下模块：')
        entryHtml.forEach((filePath) => {
            console.log(`\t${baseDir(filePath)} => ${filePath}`)
            var filename = baseDir(filePath)
            let conf = {
                template: filePath,
                filename: filename + '.html',
                chunks: ['manifest', 'vendor', filename],
                inject: true
            }
            if (process.env.NODE_ENV === 'production') {
                conf = merge(conf, {
                    minify: {
                        removeComments: true,
                        collapseWhitespace: true,
                        removeAttributeQuotes: true
                    },
                    chunksSortMode: 'dependency'
                })
            }
            arr.push(new HtmlWebpackPlugin(conf))
        })
        return arr
    }

### 三、配置webpack配置文件 ###

**1）配置webpack.base.conf.js文件**  
打开webpack.base.conf.js文件，引入scanner.js文件中的entries方法，配置entry入口文件。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpaGFuemhp_size_16_color_FFFFFF_t_70]  
**2）配置webpack.dev.conf.js和webpack.prod.conf.js文件**

// 引入scanner.js文件的htmlPlugin方法
    const {htmlPlugin} = require('./scanner')
    
    // 将htmlPlugin方法生成的html-webpack-plugin实例数组合并至plugins数组中
    plugins:[
    	...
    ].concat(htmlPlugin())

![在这里插入图片描述][20200512175111308.png]

[20200512165605436.png]: /images/20230312/e288be804ade4e67888b3033c24c5143.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpaGFuemhp_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200512174604673.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpaGFuemhp,size_16,color_FFFFFF,t_70
[20200512175111308.png]: https://img-blog.csdnimg.cn/20200512175111308.png