Vue-Cli3配置多页面应用(详)

先创建一个vuecli3项目(前面的安装环境就不说了,下面配置任意选,我这里直接默认配置)
在这里插入图片描述
创建好了,如下目录
在这里插入图片描述

我们将页面添加上几个,先把原来的复制几份,为index1.html index2.html index3.html ,再把原来的index.html删了,看着舒服一点,这里每一个页面都一样

在这里插入图片描述
三个页面都创建好了,接下来我们需要为每一个页面准备单独的组件,单独的main.js,单独的路由,看我怎么做
先在src下创建一个目录pages,下面创建三个index文件夹,index1,index2.。。。,每一个index代标一个独立的页面数据

在这里插入图片描述
因为每一个应用都需要一个App.vue和main.js,所以我们将原来的在外边的
App.vue和main.js剪切掉,
分别复制到各个应用里面

在这里插入图片描述

接下来就是要告诉vue-cli我的配置
在根目录下新创建一个vue.config.js
添加一些数据
在这里插入图片描述
数据中pages属性是固定的,然后里面可以配置多个应用,每个应用指定了自己的入口,模板。名字和标题,
至此已经配置完成了,但是访问页面时会跳到err页面,因为没有index.html,,稍等再写,有事

猜你喜欢

转载自blog.csdn.net/lioncatch/article/details/109162615