vue-cli3.0实现一个多页面应用的历奇经历记录总结


Posted in Javascript onMarch 16, 2020

本文实例讲述了vue-cli3.0实现一个多页面应用的历奇经历。分享给大家供大家参考,具体如下:

故事背景

这是在刚请完假回来,一切都在计划之中,早上一来,就接到项目经历的新的需求(这个是烂摊子,已经好几个人接手,离职),我内心是拒绝的,可最后办法,没有其他人去做,最后就落在了我头上。

接到需求,先看了需求,跟以前的比起来,改动挺大,数据结构全改了,如果在原来的基础上改,成本有点大,所以,就想着重启项目来实现。于是就使用vue的最新脚手架工具vue-cli3.0来初始化项目,但突然,一个会议又来了,项目经理,评估了工作,觉得另一个同事的工作量太大,于是又把后台的一部分功能甩给我来实现,当时内心是mmp的。

本来项目是做的是单页应用,而新分配给我的功能,页面也不多,功能也不算太复杂,就不想再单独启一个工程,就想着把这个功能,做在现有的工程里,但是呢,这是两个完全没有关联的功能,于是乎,多页面应用在脑子中呼之欲出。

于是开始了从单页面应用改造成多页面应用的过程。

一、初始化项目

使用vue3.0创建一个项目,项目默认是单页应用,目录如下:

|-node_modules
|-public
	|-favicon.ico
	|-index.html
|-src
	|-assets
	|-components
	|-store
	|-views
	|-App.vue
	|-main.js
|-.browserslistrc
|-.env.development
|-.env.production
|-.eslintrc.js
|-.gitignore
|-.prettierrc.js
|-babel.config.js
|-package.json

二、将单页应用修改成多面应用

1.(必选)在src文件下新增文件夹,每个文件夹代表一个独立的页面,文件夹里都含有App.vue,main.js,router.js文件

2.(必选)在src文件下新增配置文件vue.config.js

3.(可选)在src文件下新增文件store.js,可存储数据,被每个独立页面都可取到

4.(可选)删除原先src文件下的App.vue,main.js文件
————————————————
最终文件目录如下:

|-node_modules
|-public
	|-favicon.ico
	|-index.html
|-src
	|-api
	|-assets
	|-components
	|-store
	|-styles
	|-utils
	|-views
		|-admin
			 |-App.vue
			 |-main.js
			 |-index.vue
			 |-router.js
		|-front
			 |-App.vue
			 |-main.js
			 |-index.vue
			 |-router.js
|-.browserslistrc
|-.env.development
|-.env.production
|-.eslintrc.js
|-.gitignore
|-.prettierrc.js
|-babel.config.js
|-package.json
|-vue.config.js

三、配置vue.config.js

在该文件下添加每个页面的入口,出口,模板文件,具体配置如下:

vue-cli3.0实现一个多页面应用的历奇经历记录总结

配置好后,直接通过npm run serve启动项目,发现一切正常,于是,就开始愉快地编码,打开浏览器:http://192.168.0.28:8080/front,看效果:

vue-cli3.0实现一个多页面应用的历奇经历记录总结

一切都很完美,于是开始打包,熟练地在命令行敲下 npm run build , 看着进度条一点点走着,内心也是有点小激动的,打包完成,看看打包目录:

vue-cli3.0实现一个多页面应用的历奇经历记录总结

先利用http-server启一个服务,然后去访问:http://192.168.0.28:8080/front.html
结果页面空白??? 这是什么情况?

于是,我慢慢回想,发现了有点异常,在开发环境,我访问是http://192.168.0.28:8080/front,而在http-server服务器上我访问是却是http://192.168.0.28:8080/front.html。于是我将http-server上的地址改为http://192.168.0.28:8080/front, 结果却是404.后来一想,这应该是vue路由的模式为history导致,于是尝试去改为hash, 发现也并不起作用,后来看文档,发现vue-cli3.0开发多页面应用,默认为history模式。怎么办呢,于是又想着从路由着手,将routes中的path改为xxx.html,实现代码如下:

vue-cli3.0实现一个多页面应用的历奇经历记录总结

这下再通过http://192.168.0.28:8080/front.html去访问,可以了,哈哈,内心有点小开心,然后将打包后的代码上传,提交给后台同学,让其去集成。一集成,又出问题啦,页面又空白啦,一开始脑子里想,是不是publicPath不对呀,但一看也没问题,我用的是相对路径,请求也都发了,就是空白,后来,后台的同学说,将项目部署在根目录下,就可以访问,我一听,想可能是路径问题,于是科在路由中加入了base选项,代码如下:

vue-cli3.0实现一个多页面应用的历奇经历记录总结
再打包,给后台同学集成,终于大功告成,通过这次经历,也算收获颇多,故记录下来,以共勉!

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
js下利用控制器载入对应脚本
Jul 17 Javascript
用jquery生成二级菜单的实例代码
Jun 24 Javascript
Jquery Ajax方法传值到action的方法
May 11 Javascript
HTML5之WebSocket入门3 -通信模型socket.io
Aug 21 Javascript
js中字符串编码函数escape()、encodeURI()、encodeURIComponent()区别详解
Apr 01 Javascript
详解Angular2中Input和Output用法及示例
May 21 Javascript
vue.js加载新的内容(实例代码)
Jun 01 Javascript
webpack学习教程之publicPath路径问题详解
Jun 17 Javascript
react 创建单例组件的方法
Apr 26 Javascript
JQuery判断radio单选框是否选中并获取值的方法
Jan 17 jQuery
解决vue的过渡动画无法正常实现问题
Oct 31 Javascript
vue-cli3.X快速创建项目的方法步骤
Nov 14 Javascript
vue从零实现一个消息通知组件的方法详解
Mar 16 #Javascript
JavaScript实现动态留言板
Mar 16 #Javascript
vue中的双向数据绑定原理与常见操作技巧详解
Mar 16 #Javascript
js+canvas实现纸牌游戏
Mar 16 #Javascript
微信小程序利用button控制条件标签的变量问题
Mar 15 #Javascript
JS apply用法总结和使用场景实例分析
Mar 14 #Javascript
javascript事件循环event loop的简单模型解释与应用分析
Mar 14 #Javascript
You might like
第十四节 命名空间 [14]
2006/10/09 PHP
Search Engine Friendly的URL设计
2006/10/09 PHP
php中$_GET与$_POST过滤sql注入的方法
2014/11/03 PHP
在Javascript里访问SharePoint列表数据的实现方法
2011/05/22 Javascript
jquery插件制作 自增长输入框实现代码
2012/08/17 jQuery
js捕获鼠标右键菜单中的粘帖事件实现代码
2013/04/01 Javascript
jquery属性过滤选择器使用示例
2013/06/18 Javascript
返回页面顶部top按钮通过锚点实现(自写)
2013/08/30 Javascript
在jquery boxy中添加百度地图坐标拾取注意流程
2014/04/03 Javascript
javascript对JSON数据排序的3个例子
2014/04/12 Javascript
分享2个jQuery插件--jquery.fileupload与artdialog
2014/12/26 Javascript
javascript仿百度输入框提示自动下拉补全
2016/01/07 Javascript
JavaScript中this的用法实例分析
2016/12/19 Javascript
实例学习JavaScript读取和写入cookie
2018/01/29 Javascript
node.js自动上传ftp的脚本分享
2018/06/16 Javascript
详解jenkins自动化部署vue
2019/05/14 Javascript
Vue 开发必须知道的36个技巧(小结)
2019/10/09 Javascript
Vue中keep-alive组件作用详解
2020/02/04 Javascript
Python实现一个Git日志统计分析的小工具
2017/12/14 Python
Python实现的在特定目录下导入模块功能分析
2019/02/11 Python
selenium python 实现基本自动化测试的示例代码
2019/02/25 Python
python的依赖管理的实现
2019/05/14 Python
用python给自己做一款小说阅读器过程详解
2019/07/11 Python
使用 Python 合并多个格式一致的 Excel 文件(推荐)
2019/12/09 Python
python递归调用中的坑:打印有值, 返回却None
2020/03/16 Python
python 读取.nii格式图像实例
2020/07/01 Python
HTML5打开本地app应用的方法
2016/03/31 HTML / CSS
欧洲顶级体育电子商务网站:SportsShoes.com
2018/03/27 全球购物
无谷物狗粮:Pooch & Mutt
2018/05/23 全球购物
美国婚礼装饰和活动用品批发供应商:Event Decor Direct
2018/10/12 全球购物
入股协议书范本
2014/04/14 职场文书
乡镇群众路线专项整治方案
2014/11/03 职场文书
2014年青年志愿者工作总结
2014/12/09 职场文书
聊聊Lombok中的@Builder注解使用教程
2021/11/17 Java/Android
使用refresh_token实现无感刷新页面
2022/04/26 Javascript
最新动漫情报:2022年7月新番定档超过30部, OVERLORD骨王第四季也在其中噢
2022/05/04 日漫