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函数中onmousedown和onclick的区别和联系探讨
May 19 Javascript
extjs两个tbar问题探讨
Aug 08 Javascript
js onclick事件传参讲解
Nov 06 Javascript
jquery修改属性值实例代码(设置属性值)
Jan 06 Javascript
使用js画图之圆、弧、扇形
Jan 12 Javascript
JS中关于事件处理函数名后面是否带括号的问题
Nov 16 Javascript
基于touch.js手势库+zepto.js插件开发图片查看器(滑动、缩放、双击缩放)
Nov 17 Javascript
react native与webview通信的示例代码
Sep 25 Javascript
vue自动化表单实例分析
May 06 Javascript
vue动态设置img的src路径实例
Sep 18 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)
Jan 24 Javascript
vue data引入本地图片的两种方式小结
Nov 13 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
Zend Studio for Eclipse的java.lang.NullPointerException错误的解决方法
2008/12/06 PHP
PHP游戏编程25个脚本代码
2011/02/08 PHP
PHP中将数组转成XML格式的实现代码
2011/08/08 PHP
php实现的CSS更新类实例
2014/09/22 PHP
php第一次无法获取cookie问题处理
2014/12/15 PHP
php使用pdo连接并查询sql数据库的方法
2014/12/24 PHP
php使用parse_str实现查询字符串解析到变量中的方法
2017/02/17 PHP
javascript的console.log()用法小结
2012/05/31 Javascript
javascript中直接引用Microsoft的COM生成Word
2014/01/20 Javascript
js设置function参数默认值(适合没有传参情况)
2014/02/24 Javascript
js去除输入框中所有的空格和禁止输入空格的方法
2014/06/09 Javascript
javascript结合CSS实现苹果开关按钮特效
2015/04/07 Javascript
js简单实现Select互换数据的方法
2015/08/17 Javascript
详解JavaScript编程中的数组结构
2015/10/24 Javascript
基于jQuery实现页面搜索功能
2020/03/26 Javascript
jQuery基于函数重载实现自定义Alert函数样式的方法
2016/07/27 Javascript
教你JS中的运算符乘方、开方及变量格式转换
2016/08/09 Javascript
一文让你彻底搞清楚javascript中的require、import与export
2017/09/24 Javascript
基于ES6作用域和解构赋值详解
2017/11/03 Javascript
Bootstrap 中data-[*] 属性的整理
2018/03/13 Javascript
详解element-ui动态限定的日期范围选择器代码片段
2020/07/03 Javascript
[03:42]2014DOTA2国际邀请赛 第三日比赛排位扑朔迷离
2014/07/12 DOTA
wxpython中利用线程防止假死的实现方法
2014/08/11 Python
python中string模块各属性以及函数的用法介绍
2016/05/30 Python
Python函数的周期性执行实现方法
2016/08/13 Python
Python求出0~100以内的所有素数
2018/01/23 Python
PyQt5每天必学之弹出消息框
2018/04/19 Python
python 使用装饰器并记录log的示例代码
2019/07/12 Python
Python爬虫破解登陆哔哩哔哩的方法
2020/11/17 Python
pycharm实现猜数游戏
2020/12/07 Python
轻松制作精彩视频:Animoto
2018/09/19 全球购物
技能竞赛活动方案
2014/02/21 职场文书
员工三分钟演讲稿
2014/08/19 职场文书
政审证明材料
2015/06/19 职场文书
《草船借箭》教学反思
2016/02/23 职场文书
微信小程序和php的登录实现
2021/04/01 PHP