vue 页面第一次进入首页空白好久出来_vuecli3开发多页面项目

    本文探讨下vue-cli3开发多页面项目的简单构建，先分析下使用场景，举个栗子：公司做后台管理系统，涉及到前端展示和后端管理两个部分。这种情况，当然可以在一个项目里开发，但是我们希望分开来方面单独管理，但是又不想开两个项目去做，会增加开发和维护成本，所以就可以选择多页面开发。

    讲明应用场景，下面撸起袖子搞起来。

    先将vue-cli3项目搭建好，CMD命令在指定路径下：vue create myPro，然后巴拉巴拉一顿操作搞起来，你会得到：

然后，别忘了新建vue.config.js配置文件。然后命令：cd myPro

再npm run serve启动项目，正常运行，OK，然后接下来画重点了。

    既然我们的目的是多页面开发，比如，我们分page1和page2，在url后面添加page1或page2分别进入两个模块的页面，我们在src下面新建pages文件夹，然后再分别新建page1和page2两个文件夹分别写两个模块的代码，这两个模块需要各自的入口文件，实例化vue，路由和vuex，所以在这两个文件加下还要新建上述的一些文件，

    下面看下page1下面这几个文件的内容(page2类似)：

App.vue:

index.html:

index.js:

注意上面三个id值保持一致。

router.js:

store.js:

下面vue.config.js配置多页面的重点，先上代码：

参照上面的写，每行代码的注释也是很清楚了。先试试将项目再运行起来，

此时你如果在浏览器上输入localhost+端口，你会发现页面是空白的，然后你在url后面加上page1，你会看到：

加上page2时：

到这里我们已经实现了创建多页面开发项目。

不过还没结束，我们回顾下，我们直接输入ip+端口时页面是空白的，这是因为项目运行时会默认去找index的页面文件，但是我们在vue.config.js中并没有在pages里面定义index的页面，所以就是空白的，解决这个也很简单，我们复制page1文件夹，放在同级目录下改名为index，里面views/home.vue将div的内容改成index，方便查看页面变化，然后vue.config.js中也添加index部分内容：

我们再输入输入localhost: 端口，页面就会显示index页面的内容了：

另外，这个vue.config.js这样写很繁琐，我们可以引入node.js的glob模块来处理，先上代码：

golb模块允许我们使用*来匹配对应规则的文件，所以我们可以创建一个函数实现pages的配置。

我们再来看下打包出来的文件dist:

有三个html文件，把dist文件夹丢到服务器中，也是可以分别打开这三文件对应的页面的。

OK，到此结束项目的开发。以上是个人的归纳总结，希望对你有帮助，如果发现不正确的地方欢迎指正！