Vue CLI 3.x 是 Vue.js 官方提供的一款强大的脚手架工具，它极大地简化了 Vue.js 应用的初始化和构建过程。在 Vue CLI 3 中，不仅支持单页面应用（SPA）的构建，还内置了对多页面应用（MPA）的支持，这使得开发者能够更高效地管理多个独立的入口页面。下面我们将详细讨论 Vue CLI 3 中如何配置和使用多页面应用。
1. **创建项目**
确保已经全局安装了 Vue CLI 3。如果还没有安装，可以通过以下命令进行安装：
```
npm install -g @vue/cli
```
然后，创建一个新的 Vue 项目，并选择一个预设或者手动配置：
```
vue create my-project
```
2. **配置多页面应用**
在项目根目录下，打开 `vue.config.js` 文件（如果没有，创建一个）。这个文件用于自定义 Vue CLI 的配置。在该文件中，我们可以配置 `pages` 属性来定义多个入口页面：
```javascript
module.exports = {
pages: {
index: {
entry: 'src/pages/index/main.js', // 入口文件
template: 'public/index.html', // 模板文件
filename: 'index.html', // 输出文件名
},
about: {
entry: 'src/pages/about/main.js',
template: 'public/about.html',
filename: 'about.html',
}
}
}
```
在这个例子中，我们定义了两个页面：`index` 和 `about`，每个页面有自己的入口文件、模板文件和输出文件名。
3. **目录结构**
根据上面的配置，`src/pages` 目录下应有对应的子目录，例如 `src/pages/index` 和 `src/pages/about`，分别包含各自的 `main.js` 文件。同时，`public` 目录下应有对应的 HTML 模板文件。
4. **路由管理**
在多页面应用中，每个页面通常有自己的路由管理。你可以为每个页面设置独立的路由，或者在全局路由文件中根据页面名称动态配置。例如，在 `src/router/index.js` 中，你可以这样配置：
```javascript
import Vue from 'vue'
import Router from 'vue-router'
const routes = [
{ path: '/', component: () => import('@/pages/index') },
{ path: '/about', component: () => import('@/pages/about') },
]
export default new Router({
routes
})
```
5. **运行与构建**
现在，你可以通过以下命令启动开发服务器或构建项目：
```
npm run serve // 开发模式
npm run build // 生产模式
```
Vue CLI 会根据 `vue.config.js` 中的配置自动处理多页面应用的构建。
6. **其他配置**
除了多页面配置外，Vue CLI 3 还提供了许多其他功能，如 CSS 预处理器支持、代码分割、热模块替换等。你可以根据项目需求在 `vue.config.js` 中进一步定制这些配置。
总结，Vue CLI 3 提供的多页面应用配置使得开发和管理多个入口页面变得简单。只需几步简单的配置，你就可以享受到高效开发的便利。对于想要学习和使用 Vue CLI 3 构建多页面应用的开发者来说，这是一个非常友好的特性。
2025-07-03 14:53:19
124KB
1
Windows 下 Vue-cli 及 Webpack 搭建安装环境
在现代 Web 开发中，Vue-cli 和 Webpack 是两个非常重要的工具，前者是 Vue.js 的脚手架工具，可以快速构建 Vue 项目，而后者是目前最流行的模块打包工具。本文将详细介绍如何在 Windows 下搭建 Vue-cli 及 Webpack 环境，并且详细讲解每一步的安装和配置过程。
一、安装 Node.js
Node.js 是目前最流行的 JavaScript 运行时环境， Vue-cli 和 Webpack 都依赖于 Node.js 环境。需要从 Node.js 官方网站下载并安装 Node.js，下载地址为：https://nodejs.org/en/download/。安装完成后，可以通过输入 "npm -v" 来测试是否成功安装。
二、安装 npm
npm 是 Node.js 的包管理工具，用于安装和管理项目依赖项。由于新版的 Node.js 已经集成了 npm，所以之前 npm 也一并安装好了。可以通过输入 "npm -v" 来测试是否成功安装。如果安装的是旧版本的 npm，可以通过 npm 命令来升级，命令如下：npm install npm -g。
此外，也可以使用淘宝定制的 cnpm（gzip 压缩支持）命令行工具代替默认的 npm，命令如下：npm install -g cnpm --registry=https://registry.npm.taobao.org。这样就可以使用 cnpm 命令来安装模块了，例如：cnpm install [name]。
三、安装 Vue-cli
Vue-cli 是 Vue.js 的脚手架工具，用于快速构建 Vue 项目。可以通过 npm 命令来安装 Vue-cli，命令如下：npm install -g vue-cli。这个命令只需要运行一次就可以了。安装完成后，以后就不用安装了。
四、使用 Vue-cli 构建项目
在终端中把当前目录定位到准备存放项目的地方。例如，如果准备放在 E:\vue 这个目录下面，那么先通过 cmd 命令进入这个目录，命令如下：cd vue。
然后，使用 Vue-cli 构建一个项目，命令如下：vue init webpack demo01。这将新建一个名为 demo01 的 Vue 项目。
五、安装项目依赖项
在项目目录下，使用 cnpm 命令安装项目依赖项，命令如下：cnpm install。这将安装项目所需的所有依赖项。
六、启动项目
安装完成项目依赖项后，使用 npm 命令启动项目，命令如下：npm run dev。这将启动开发服务器，并自动打开一个浏览器窗口，显示项目的实际效果。
本文详细介绍了如何在 Windows 下搭建 Vue-cli 及 Webpack 环境，并且详细讲解了每一步的安装和配置过程。希望对大家的学习有所帮助，也希望大家多多支持我们。
2025-06-20 15:54:32
160KB
1
电子
vueCli + electron12.0.0
调用C# DLL
electron-updater在线更新
项目设置
npm install
为开发编译和热重载
npm run serve
为生产编译和缩小
npm run build
Lints 和修复文件
npm run lint
自定义配置
请参阅。
地方发展（重要）
npm run electron:serve
打包上线（重要）
npm run electron:build
调用 C# DLL（xxx.vue 调用）
添加DLL操作等
将 C#DLL 放入根目录 /** (public/resources) */
修改文件 /** 下路径（ src/background.js ） */
在background.js里的(调用dll (模块) start)区域里添加dll操作
1. background.js:
2022-06-21 16:24:07
551KB
1
基于vue-cli构建的财务后台管理系统(vue2 vuex axios vue-router element-ui echarts websocket vue-i18n)
2022-03-13 14:06:45
204KB
1
适用人群具有一定javaScript基础具有一定Vuejs基础
课程概述本季度基于Vuecli +?elementUI实战开发商城后台管理系统完整视频教程，其中包括vuex模块化管理、Vue-router二次封装、使用element-ui库、支付模块、多权限管理、商品多规格实现、对象存储、api接口安全以及部署服务器上线等知识等。
课程大纲见以下图！
2021-12-22 11:26:02
439B
1
基于vue-cli模板的多页面多路由项目，一个PC端页面入口，一个移动端页面入口，且有各自的路由， vue webpack vue-router vuex mock axios
2021-11-29 22:58:01
1.17MB
1