使用 vue-cli 开发多页应用

绝地灬酷狼 2022-06-03 01:41 250阅读 0赞

# [使用 vue-cli 开发多页应用][vue-cli] #

## 全局配置 ##

### 修改 webpack.base.conf.js ###

打开 `~\build\webpack.base.conf.js` ，找到`entry`，添加多入口

entry: {
        app: './src/main.js',
        app2: './src/main2.js',
        app3: './src/main3.js',
    },

> 运行、编译的时候每一个入口都会对应一个`Chunk`

## run dev 开发环境 ##

### 修改 webpack.dev.conf.js ###

打开 `~\build\webpack.dev.conf.js` ，在`plugins`下找到`new HtmlWebpackPlugin`，在其后面添加对应的多页，并为每个页面添加`Chunk`配置

> `chunks: ['app']`中的app对应的是`webpack.base.conf.js`中`entry`设置的入口文件

plugins:[
        // https://github.com/ampedandwired/html-webpack-plugin
        // 多页:index.html → app.js
        new HtmlWebpackPlugin({
          filename: 'index.html',//生成的html
          template: 'index.html',//来源html
          inject: true,//是否开启注入
          chunks: ['app']//需要引入的Chunk，不配置就会引入所有页面的资源
        }),
        // 多页:index2.html → app2.js
        new HtmlWebpackPlugin({
          filename: 'index2.html',//生成的html
          template: 'index2.html',//来源html
          inject: true,//是否开启注入
          chunks: ['app2']//需要引入的Chunk，不配置就会引入所有页面的资源
        }),
        // 多页:index3.html → app3.js
        new HtmlWebpackPlugin({
          filename: 'index3.html',//生成的html
          template: 'index3.html',//来源html
          inject: true,//是否开启注入
          chunks: ['app3']//需要引入的Chunk，不配置就会引入所有页面的资源
        })
    ]

## run build 编译 ##

### 修改 config/index.js ###

打开`~\config\index.js`，找到`build`下的`index: path.resolve(__dirname, '../dist/index.html')`，在其后添加多页

build: {
        index: path.resolve(__dirname, '../dist/index.html'),
        index2: path.resolve(__dirname, '../dist/index2.html'),
        index3: path.resolve(__dirname, '../dist/index3.html'),
    },

### 修改 webpack.prod.conf.js ###

打开`~\build\webpack.prod.conf.js`，在`plugins`下找到`new HtmlWebpackPlugin`，在其后面添加对应的多页，并为每个页面添加`Chunk`配置

> `HtmlWebpackPlugin` 中的 `filename` 引用的是 config/index.js 中对应的 `build`

plugins: [
        // 多页:index.html → app.js
        new HtmlWebpackPlugin({
            filename: config.build.index,
            template: 'index.html',
            inject: true,
            minify: {
                removeComments: true,
                collapseWhitespace: true,
                removeAttributeQuotes: true
                // more options:
                // https://github.com/kangax/html-minifier#options-quick-reference
            },
            // necessary to consistently work with multiple chunks via CommonsChunkPlugin
            chunksSortMode: 'dependency',
            chunks: ['manifest','vendor','app']//需要引入的Chunk，不配置就会引入所有页面的资源
        }),
        // 多页:index2.html → app2.js
        new HtmlWebpackPlugin({
            filename: config.build.index2,
            template: 'index2.html',
            inject: true,
            minify: {
                removeComments: true,
                collapseWhitespace: true,
                removeAttributeQuotes: true
            },
            chunksSortMode: 'dependency',
            chunks: ['manifest','vendor','app2']//需要引入的Chunk，不配置就会引入所有页面的资源
        }),
        // 多页:index3.html → app3.js
        new HtmlWebpackPlugin({
            filename: config.build.index3,
            template: 'index3.html',
            inject: true,
            minify: {
                removeComments: true,
                collapseWhitespace: true,
                removeAttributeQuotes: true
            },
            chunksSortMode: 'dependency',
            chunks: ['manifest','vendor','app3']//需要引入的Chunk，不配置就会引入所有页面的资源
        }),
    ]

> 参考:  
> [小凡哥视频 - 讲解 vuejs2 ，使用 vue-cli 怎么搭起 多页应用][- _ vuejs2 _ vue-cli _]

--------------------

> 如果页面比较多，可以考虑使用循环将 `HtmlWebpackPlugin` 添加到 `plugins`

// utils.js
    exports.getEntry = function(globPath, pathDir) {
        var files = glob.sync(globPath);
        var entries = {},
            entry, dirname, basename, pathname, extname;
    
        for (var i = 0; i < files.length; i++) {
            entry = files[i];
            dirname = path.dirname(entry);
            extname = path.extname(entry);
            basename = path.basename(entry, extname);
            pathname = path.join(dirname, basename);
            pathname = pathDir ? pathname.replace(new RegExp('^' + pathDir), '') : pathname;
            entries[pathname] = ['./' + entry];
        }
        return entries;
    }

// webpack.base.conf.js
    var pages = Object.keys(utils.getEntry('../src/views/**/*.html', '../src/views/'));
    pages.forEach(function (pathname) {
        // https://github.com/ampedandwired/html-webpack-plugin
        var conf = {
            filename: '../views/' + pathname + '.html', //生成的html存放路径，相对于path
            template: '../src/views/' + pathname + '.html', //html模板路径
            inject: false,    //js插入的位置，true/'head'/'body'/false
            /* * 压缩这块，调用了html-minify，会导致压缩时候的很多html语法检查问题， * 如在html标签属性上使用{ {...}}表达式，所以很多情况下并不需要在此配置压缩项， * 另外，UglifyJsPlugin会在压缩代码的时候连同html一起压缩。 * 为避免压缩html，需要在html-loader上配置'html?-minimize'，见loaders中html-loader的配置。 */
            // minify: { //压缩HTML文件
            // removeComments: true, //移除HTML中的注释
            // collapseWhitespace: false //删除空白符与换行符
            // }
        };
        if (pathname in config.entry) {
            conf.favicon = 'src/images/favicon.ico';
            conf.inject = 'body';
            conf.chunks = ['vendors', pathname];
            conf.hash = true;
        }
        config.plugins.push(new HtmlWebpackPlugin(conf));
    });

> 同样入口 `entry` 也可以使用

// webpack.base.conf.js
    entry: {
        app: utils.getEntry('../src/scripts/**/*.js', '../src/scripts/')
    },

[vue-cli]: https://segmentfault.com/a/1190000007287998
[- _ vuejs2 _ vue-cli _]: https://github.com/bhnddowinf/vuejs2-learn