使用Vue-cli2+webpack搭建多页面应用工程_vue2cli创建的项目使用webpack-优快云博客

本文链接：https://blog.youkuaiyun.com/jayson_hk/article/details/103403983

本文详细介绍了如何在Vue项目中实现多页面配置，包括使用vue-cli和webpack进行项目初始化、目录结构调整、多入口和多页面输出配置修改，以及新增入口文件的具体步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关于vue、vue-cli、webpack相关的内容在这里就不一一细说了，不了解的可以参考官网教程，在这里直接进入正题

1. vue init webpack创建工程，得到的工程结构如下：

执行 vue init webpack pro_name
在这里插入图片描述
执行 npm run dev，保证项目可以正常运行

2.调整项目目录结构

打开目录文件夹，修改src下的目录，在src文件夹里新建pages文件夹，用于存放页面文件，然后在pages文件夹下新建index文件夹，把现有的页面文件移入index文件夹，过程如下：
1）现在的结构
在这里插入图片描述
2）在src下新建pages，在pages下新建index

3）把现在的页面相关文件移入index文件夹(src下的相关文件和最外层的index.html)，保证入口文件js与文件夹一直，把main.js改名为index.js

调整后的结构：

至此，文件目录调整完毕。

3.多入口和多页面输出的相关配置修改

1）.找到build文件夹下的utils.js文件
在这里插入图片描述
插入如下代码：

// 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: utils.entries()

3）.修改build/webpack.dev.conf.js（开发环境）的多页面配置

4）.修改build/webpack.prod.conf.js（生产环境）的多页面配置

到这里，项目的配置修改已经完成，可以运行项目检验下是否可以正常打开入口文件

4.新建入口文件

1）在pages文件夹下新建一个文件夹，放入新的html文件，npm run dev重新编译工程，可以正常访问到该文件即证明多页面配置成功！
在这里插入图片描述

2）新建一个vue结构带有router的文件夹

vueTest.html:

<!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>
    <div id="vueTest"></div>
</body>
</html>

vueTest.js

import Vue from 'vue'
import VueTest from './vueTest.vue'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#vueTest',
  router,
  components: { VueTest },
  template: '<VueTest/>'
})

vueTest.vue

<template>
  <div id="vueTest">
    this is vue-test
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'vueTest'
}
</script

router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})