最近上手一个新项目，头儿说要用vue3搞个多页面的应用，说是方便以后扩展功能。作为一个老码农，虽然平时单页面耍得多，但多页面咱也没在怕的。今天就跟大家伙儿分享一下我的实践过程，保证简单粗暴，一学就会！

准备工作

得把vue-cli这玩意儿给装上。这年头，没个脚手架，撸代码都不得劲儿。装好之后，咱就可以创建一个新项目。我这里就直接用vue create my-project（my-project是你自己起的项目名称）来创建项目，一路回车，选个vue3，简单完事。

搭建多页面结构

接下来就是关键，怎么把单页面改成多页面。我的做法是这样的：

• 第一步，在src目录下，新建一个文件夹，我给它取名叫pages。
• 第二步，在这个pages文件夹里，再建几个子文件夹，每个子文件夹对应一个页面。比如，我建page1、page2两个文件夹，准备搞两个页面。
• 第三步，在每个page文件夹里，都创建一个vue文件，作为页面的入口。例如，我在page1里创建*，在page2里创建*。

这么一来，项目的目录结构大概就长这样：

src
├── pages
│   ├── page1
│   │   └── *
│   ├── page2
│   │   └── *
├── *
├── *

配置*

光搭好架子还不行，得告诉vue-cli怎么打包这些页面。这时候，就轮到*这个文件出场。如果没有这个文件就自己创建一个，跟*同级。

在*里，咱需要配置pages选项，告诉vue-cli每个页面的入口文件、模板文件、输出文件名等等。我的配置大概是这样的：

* = {
pages: {
page1: {
entry: 'src/pages/page1/*',
template: 'public/*',
filename: '*',

page2: {
entry: 'src/pages/page2/*',
template: 'public/*',
filename: '*',

注意，我这里用同一个*，因为是演示，所以我直接复制多份出来改名字比如*和*，实际项目中你可能会有不同的模板。

编写页面内容

配置好，接下来就是往*和*里填内容。这部分就跟平时写单页面应用没啥区别，想写啥就写为区分两个页面，我分别在两个页面的模板里加不同的标题。

例如，*：

<template>
<div>
<h1>这是页面一</h1>
</div>
</template>

<template>
<div>
<h1>这是页面二</h1>
</div>
</template>

运行和打包

一切准备就绪，就可以运行项目看看效果。执行npm run serve，然后打开浏览器，分别访问localhost:8080/*和localhost:8080/*，就能看到两个不同的页面。

如果要打包发布，就执行npm run build。打包完成后，会在dist目录下生成*和*两个文件，以及相应的js和css文件。把这些文件部署到服务器上，就大功告成！

一点小优化

为避免每个页面都重复加载相同的代码，我们可以利用vue-cli的splitChunks功能，把公共代码提取出来，单独打包成一个文件。这样可以减少文件体积，提高加载速度。具体怎么配置，这里就不展开说，有兴趣的可以自己去研究一下。

用vue3搞多页面开发并不复杂，关键是要理清思路，配置好*。希望我的这篇分享能帮到大家，少走弯路，早日实现项目需求！