原创声明
本文系作者辛苦码字所得，欢迎分享和转载，但请在明显位置注明作者的如下信息：
笔名：来碗鸡蛋面
简书主页：https://www.jianshu.com/u/4876275b5a73
邮箱：job_tom@foxmail.com
CSDN ID：tom_wong666
需求：
Vue网站项目中，需要引入第三方已做好的H5游戏
分析：
方法一，对游戏做单页重构；
方法二，利用static文件夹的特性，直接引入整个H5游戏。
对比：
方法一，重构涉及的工作量大，而且对于H5游戏和其挂载的网站项目本身来讲，H5游戏一般是独立的页面，极少和其挂载的网站项目本身有共用组件，所以没必要合并入单页中。
方法二，将游戏部署在vue项目static文件夹中，在主项目为H5游戏做一个索引链接组件，点击时跳转到static文件夹的游戏文件就好。
实现：
1，我们来看一下vue项目打包前后的文件目录结构，可以发现开发环境中static目录中的文件被原封不动的放进生产dist文件中的static文件夹中，而且static文件夹和主index.html是同级的，所以我们可以直接把做好的H5游戏文件直接放入static文件夹中以待访问：
生产包dist文件目录结构
生产包dist文件static文件夹目录
开发环境static文件夹目录
2，在vue项目中建立一个game.vue文件，作为game跳转的索引，跳转地址写法为：
<a href="./static/game/aircraftWar/index.html">跳转到飞机大战游戏</a>
这里说明一下目录结构，打包后的vue项目，index.html和static文件夹同级，所以开头为./static.....
备注：
此设置已验证OK，需要看源码的同学，可以克隆如下项目查看：
demo的github地址：https://github.com/tom-wong666/xiaoa.git
网友评论