[配置]Vue项目中引入第三方已做好的H5游戏

需求:

Vue网站项目中,需要引入第三方已做好的H5游戏

分析:

方法一,对游戏做单页重构;

方法二,利用static文件夹的特性,直接引入整个H5游戏。

对比:

方法一,重构涉及的工作量大,而且对于H5游戏和其挂载的网站项目本身来讲,H5游戏一般是独立的页面,极少和其挂载的网站项目本身有共用组件,所以没必要合并入单页中。

方法二,将游戏部署在vue项目static文件夹中,在主项目为H5游戏做一个索引链接组件,点击时跳转到static文件夹的游戏文件就好。

实现:

1,我们来看一下vue项目打包前后的文件目录结构,可以发现开发环境中static目录中的文件被原封不动的放进生产dist文件中的static文件夹中,而且static文件夹和主index.html是同级的,所以我们可以直接把做好的H5游戏文件直接放入static文件夹中以待访问:

[配置]Vue项目中引入第三方已做好的H5游戏_第1张图片 生产dist文件目录结构 [配置]Vue项目中引入第三方已做好的H5游戏_第2张图片 生产dist文件static文件夹目录 [配置]Vue项目中引入第三方已做好的H5游戏_第3张图片 开发环境static文件夹目录

2,在vue项目中建立一个game.vue文件,作为game跳转的索引,跳转地址写法为:

跳转到飞机大战游戏

这里说明一下目录结构,打包后的vue项目,index.html和static文件夹同级,所以开头为./static.....

备注:

此设置已验证OK,需要看源码的同学,可以克隆如下项目查看:
demo的github地址:https://github.com/tom-wong666/xiaoa.git

博文通览提示:

点击此超链接跳转到Tom哥的博文分类和索引页面 

Tom哥的博客博文分类和索引页面地址:https://blog.csdn.net/tom_wong666/article/details/84137820

你可能感兴趣的:([配置]Vue项目中引入第三方已做好的H5游戏)