详解vue-cli + webpack 多页面实例应用

深入理解Vue CLI与Webpack的多页面应用实例

Vue.js是一个构建用户界面的渐进式前端框架，旨在通过简洁的API实现数据绑定和视图组件的响应式组合。Vue CLI是Vue官方提供的命令行工具，可以快速搭建大型单页应用。在实际项目中，多页面应用更为常见。如何在Vue CLI的基础上实现多页面应用呢？本文将为您详细解读。

一、项目概览

我们基于Vue CLI构建了一个多页面应用实例。该实例中，通过使用Webpack作为构建工具，将各个页面模块化、组件化。项目结构清晰，方便管理和维护。

二、项目结构

项目目录结构如下：

```markdown

vue-cli-multipage

├── build

├── config

├── src

│ ├── assets

│ │ ├── img

│ │ ├── css

│ │ └── font

│ ├── components 组件目录

│ │ ├── Button.vue

│ │ └── Hello.vue

│ ├── module 页面模块目录

│ │ ├── index 首页模块

│ │ │ ├── index.html

│ │ │ ├── index.js

│ │ │ └── App.vue

│ │ └── detail 详情页模块

│ │ ├── detail.html

│ │ ├── detail.js

│ │ └── App.vue

```

三、开发流程与使用方法

1. 安装依赖：在项目根目录下运行`npm install`安装项目所需依赖。

2. 启动开发服务器：运行`npm run dev`启动开发服务器，服务器将在localhost:8080/module/index.html提供服务，并带有热重载功能。

3. 生产环境构建：运行`npm run build`进行生产环境构建，Webpack将进行代码压缩和优化。

四、目录结构与文件组织

在项目中，我们将组件、页面模块、资源等按类新建了文件夹，方便文件储存和管理。主要文件都放在module文件夹里，以文件夹名作为html的名称。例如，首页模块的文件组织如下：

```markdown

├── index 首页模块

│ ├── index.html 首页HTML文件

│ ├── index.js 首页JavaScript文件

│ └── App.vue 首页Vue组件文件

```

访问链接为 template等都统一放在当前文件夹里。Webpack会将这些文件打包到当前页面里。如果项目不需要某个页面了，可以直接删除对应的文件夹，非常便捷。

五、组件的使用与管理

组件是Vue.js最强大的功能之一。我们可以将常用的功能和界面封装为组件，减少重复造轮子的工作。在项目中，我们将组件放在components目录下，调用组件的方法非常简单。例如，要使用Hello组件，可以如下导入和使用：

```javascript

import Hello from 'components/Hello'

```

然后，在需要的地方注册导入的组件，就可以使用了。

六、总结与展望

在构建一个Vue应用时，我们采用了vue-cli脚手架工具，该工具为我们提供了极大的便利。对于熟悉vue-cli的同学来说，构建代码通常位于根目录下的build文件夹内。对于vue的多页面应用，我们主要对webpack.base.conf.js、webpack.dev.conf.js、webpack.prod.conf.js这三个文件进行了一些关键的修改。

一、webpack.base.conf.js文件修改要点

在此文件中，我们首先通过`getEntry('./src/module//.js')`函数获取入口js文件。这个函数的目的是将项目中的所有js文件作为入口点，为每个页面生成一个对应的js文件。这样可以确保我们的多页面应用能够正确地加载和执行。

在webpack的配置中，`entry`字段定义了应用程序的入口点。我们的应用可能有多个页面，每个页面都有自己的js文件，因此我们需要为每个页面定义一个入口点。这样，当浏览器请求某个页面时，webpack会生成对应的js文件并返回给浏览器。

二、webpack.prod.conf.js文件修改要点