本文探讨下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,到此结束项目的开发。以上是个人的归纳总结,希望对你有帮助,如果发现不正确的地方欢迎指正!