需求:
Vue网站项目中,需要引入第三方已做好的H5游戏
分析:
方法一,对游戏做单页重构;
方法二,利用static文件夹的特性,直接引入整个H5游戏。
对比:
方法一,重构涉及的工作量大,而且对于H5游戏和其挂载的网站项目本身来讲,H5游戏一般是独立的页面,极少和其挂载的网站项目本身有共用组件,所以没必要合并入单页中。
方法二,将游戏部署在vue项目static文件夹中,在主项目为H5游戏做一个索引链接组件,点击时跳转到static文件夹的游戏文件就好。
实现:
1,我们来看一下vue项目打包前后的文件目录结构,可以发现开发环境中static目录中的文件被原封不动的放进生产dist文件中的static文件夹中,而且static文件夹和主index.html是同级的,所以我们可以直接把做好的H5游戏文件直接放入static文件夹中以待访问:
![](https://i-blog.csdnimg.cn/blog_migrate/50beea4b452a254cfb3777671ed4340b.png)
![](https://i-blog.csdnimg.cn/blog_migrate/2249d18441da5985972a9fe8462593e4.png)