搭建VUE多页面

妖狐艹你老母 2022-12-21 00:55 178阅读 0赞

一、准备工作：首先使用vue-cli搭建一个空的vue项目，步骤见[https://blog.csdn.net/w\_t\_y\_y/article/details/80816948][https_blog.csdn.net_w_t_y_y_article_details_80816948]。

二、单页面改造多页面操作步骤：

1、目录调整：对src目录进行一些调整：调整前是这样的：

![dc0d7db8380df3281dce8e914feb642d.png][]

（1）进入src文件夹中，新建一个文件夹，如取名pages，用于存放后面的多页面，在pages里面新建一个文件夹叫index用于存放首页，然后将下图红框内的文件(文件夹)都拉进index文件夹里面，还有最外层的index.html也拉进去：

![20201113150945866.png][]

![20201113151051490.png][]

（2）最后进入index文件夹，将里面的main.js改成index.js，保证页面的入口js文件和模板文件的名称一致  
这时候的项目目录结构接调整完毕了。

2、对相应的配置文件进行修改：

（1）首先进入build文件夹下的utils文件中进行修改：在utils文件中添加两个函数

// glob是webpack安装时依赖的一个第三方模块，还模块允许你使用 *等符号, 例如lib/*.js就是获取lib文件夹下的所有js后缀名的文件
    var glob = require('glob')
        // 页面模板
    var HtmlWebpackPlugin = require('html-webpack-plugin')
    // 取得相应的页面路径，因为之前的配置，所以是src文件夹下的pages文件夹
    var PAGE_PATH = path.resolve(__dirname, '../src/pages')
        // 用于做相应的merge处理
    var merge = require('webpack-merge')
    
    
    //多入口配置
    // 通过glob模块读取pages文件夹下的所有对应文件夹下的js后缀文件，如果该文件存在
    // 那么就作为入口处理
    exports.entries = function() {
        var entryFiles = glob.sync(PAGE_PATH + '/*/*.js')
        var map = {}
        entryFiles.forEach((filePath) => {
            var filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'))
            map[filename] = filePath
        })
        return map
    }
    
    //多页面输出配置
    // 与上面的多页面入口配置相同，读取pages文件夹下的对应的html后缀文件，然后放入数组中
    exports.htmlPlugin = function() {
        let entryHtml = glob.sync(PAGE_PATH + '/*/*.html')
        let arr = []
        entryHtml.forEach((filePath) => {
            let filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'))
            let conf = {
                // 模板来源
                template: filePath,
                // 文件名称
                filename: filename + '.html',
                // 页面模板需要加对应的js脚本，如果不加这行则每个页面都会引入所有的js脚本
                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
    }

（2）修改build/webpack.base.conf.js的入口配置：把原来的entry改为entry: utils.entries(),修改后完整的为：

var path = require('path')
    var utils = require('./utils')
    var config = require('../config')
    var vueLoaderConfig = require('./vue-loader.conf')
    
    function resolve(dir) {
        return path.join(__dirname, '..', dir)
    }
    
    module.exports = {
        entry: utils.entries(),
        output: {
            path: config.build.assetsRoot,
            filename: '[name].js',
            publicPath: process.env.NODE_ENV === 'production' ?
                config.build.assetsPublicPath :
                config.dev.assetsPublicPath
        },
        resolve: {
            extensions: ['.js', '.vue', '.json'],
            alias: {
                'vue$': 'vue/dist/vue.esm.js',
                '@': resolve('src')
            }
        },
        module: {
            rules: [{
                    test: /\.vue$/,
                    loader: 'vue-loader',
                    options: vueLoaderConfig
                },
                {
                    test: /\.js$/,
                    loader: 'babel-loader',
                    include: [resolve('src'), resolve('test')]
                },
                {
                    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                    loader: 'url-loader',
                    options: {
                        limit: 10000,
                        name: utils.assetsPath('img/[name].[hash:7].[ext]')
                    }
                },
                {
                    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                    loader: 'url-loader',
                    options: {
                        limit: 10000,
                        name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
                    }
                }
            ]
        }
    }

（3）修改build/webpack.dev.conf.js（开发环境）和build/webpack.prod.conf.js（生产环境）的多页面配置，测试环境的修改后完整的为：

var utils = require('./utils')
    var webpack = require('webpack')
    var config = require('../config')
    var merge = require('webpack-merge')
    var baseWebpackConfig = require('./webpack.base.conf')
    var HtmlWebpackPlugin = require('html-webpack-plugin')
    var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
    
    // add hot-reload related code to entry chunks
    Object.keys(baseWebpackConfig.entry).forEach(function(name) {
        baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])
    })
    
    module.exports = merge(baseWebpackConfig, {
        module: {
            rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
        },
        // cheap-module-eval-source-map is faster for development
        devtool: '#cheap-module-eval-source-map',
        plugins: [
            new webpack.DefinePlugin({
                'process.env': config.dev.env
            }),
            // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
            new webpack.HotModuleReplacementPlugin(),
            new webpack.NoEmitOnErrorsPlugin(),
            // https://github.com/ampedandwired/html-webpack-plugin
            // new HtmlWebpackPlugin({
            //   filename: 'index.html',
            //   template: 'index.html',
            //   inject: true
            // }),
            new FriendlyErrorsPlugin()
        ].concat(utils.htmlPlugin())
    })

生产环境修改后完整的为：

var path = require('path')
    var utils = require('./utils')
    var webpack = require('webpack')
    var config = require('../config')
    var merge = require('webpack-merge')
    var baseWebpackConfig = require('./webpack.base.conf')
    var CopyWebpackPlugin = require('copy-webpack-plugin')
    var HtmlWebpackPlugin = require('html-webpack-plugin')
    var ExtractTextPlugin = require('extract-text-webpack-plugin')
    var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
    
    var env = config.build.env
    
    var webpackConfig = merge(baseWebpackConfig, {
        module: {
            rules: utils.styleLoaders({
                sourceMap: config.build.productionSourceMap,
                extract: true
            })
        },
        devtool: config.build.productionSourceMap ? '#source-map' : false,
        output: {
            path: config.build.assetsRoot,
            filename: utils.assetsPath('js/[name].[chunkhash].js'),
            chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
        },
        plugins: [
            // http://vuejs.github.io/vue-loader/en/workflow/production.html
            new webpack.DefinePlugin({
                'process.env': env
            }),
            new webpack.optimize.UglifyJsPlugin({
                compress: {
                    warnings: false
                },
                sourceMap: true
            }),
            // extract css into its own file
            new ExtractTextPlugin({
                filename: utils.assetsPath('css/[name].[contenthash].css')
            }),
            // Compress extracted CSS. We are using this plugin so that possible
            // duplicated CSS from different components can be deduped.
            new OptimizeCSSPlugin({
                cssProcessorOptions: {
                    safe: true
                }
            }),
            // generate dist index.html with correct asset hash for caching.
            // you can customize output by editing /index.html
            // see https://github.com/ampedandwired/html-webpack-plugin
            // 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'
            // }),
            // split vendor js into its own file
            new webpack.optimize.CommonsChunkPlugin({
                name: 'vendor',
                minChunks: function(module, count) {
                    // any required modules inside node_modules are extracted to vendor
                    return (
                        module.resource &&
                        /\.js$/.test(module.resource) &&
                        module.resource.indexOf(
                            path.join(__dirname, '../node_modules')
                        ) === 0
                    )
                }
            }),
            // extract webpack runtime and module manifest to its own file in order to
            // prevent vendor hash from being updated whenever app bundle is updated
            new webpack.optimize.CommonsChunkPlugin({
                name: 'manifest',
                chunks: ['vendor']
            }),
            // copy custom static assets
            new CopyWebpackPlugin([{
                from: path.resolve(__dirname, '../static'),
                to: config.build.assetsSubDirectory,
                ignore: ['.*']
            }])
        ].concat(utils.htmlPlugin())
    })
    
    if (config.build.productionGzip) {
        var CompressionWebpackPlugin = require('compression-webpack-plugin')
    
        webpackConfig.plugins.push(
            new CompressionWebpackPlugin({
                asset: '[path].gz[query]',
                algorithm: 'gzip',
                test: new RegExp(
                    '\\.(' +
                    config.build.productionGzipExtensions.join('|') +
                    ')$'
                ),
                threshold: 10240,
                minRatio: 0.8
            })
        )
    }
    
    if (config.build.bundleAnalyzerReport) {
        var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
        webpackConfig.plugins.push(new BundleAnalyzerPlugin())
    }
    
    module.exports = webpackConfig

三、测试：这时候可以在pages里面添加一个test文件夹，在test文件夹里面创建一个html文件作为测试页面

![20201113151707234.png][]

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    
    <body>
        <p>测试</p>
    </body>
    
    </html>

访问成功：

![20201113151759225.png][]

多建几个页面也是可以的：

![20201113152159231.png][]

![20201113152209258.png][]![20201113152231911.png][]![20201113152242935.png][]![20201113152254310.png][]

[https_blog.csdn.net_w_t_y_y_article_details_80816948]: https://blog.csdn.net/w_t_y_y/article/details/80816948
[dc0d7db8380df3281dce8e914feb642d.png]: /images/20221120/75150d1963494d049f9358981167614e.png
[20201113150945866.png]: /images/20221120/c046d3b645314806a2fb0d51ce52a52c.png
[20201113151051490.png]: /images/20221120/30ab1685587b40c09a80e2b68cb5c1b8.png
[20201113151707234.png]: /images/20221120/3442b822607245fa93d8946d84066cfe.png
[20201113151759225.png]: /images/20221120/f0d7199358c04ef3949298aa2526d35e.png
[20201113152159231.png]: /images/20221120/31df42e5ac2248dd9b29b1918361b932.png
[20201113152209258.png]: https://img-blog.csdnimg.cn/20201113152209258.png
[20201113152231911.png]: https://img-blog.csdnimg.cn/20201113152231911.png
[20201113152242935.png]: https://img-blog.csdnimg.cn/20201113152242935.png
[20201113152254310.png]: https://img-blog.csdnimg.cn/20201113152254310.png