前段时间，做了一个混合开发的项目，主要是以vue框架开发h5页面，使用cordova作为中间沟通桥梁，实现了h5与安卓、iOS的混合开发，由于从事iOS开发，h5也是刚接触不久，很多深入原理还不太清楚，只说下我们这个个项目的开发流程，记录过程中遇到的比较大的问题。
1、创建vue项目，具体流程可参考下图（基于mac）：
2、开发完毕后对vue项目进行编译，编译之前需要对配置进行一些更改，在目录config下，找到index.js文件，把assetsPublicPath:'/'，修改为：assetsPublicPath:'./',
经过测试发现不修改可能会造成资源文件找不到的问题，另外需要注意的是，图片资源不要放到文件static目录下，否则同样会造成资源文件找不到。配置文件之后，执行命令：npm run build，执行结果如下图所示（部分）：
3、编译完成后会生成dist文件，如下图所示：
4、在原生可通过读取文件dist文件目录下的index.html进行展示h5页面。
5、需要跳转到某一个单独的h5页面，可使用路由进行单个页面跳转：
var path = "/detail"; var url = "/index.html#"+path;
其中path就是要跳转页面在router中的定义
这样就完成了原生调用vue编写的h5页面了。
标签：原生,文件,vue,h5,开发,跳转,混合,页面 来源： https://www.cnblogs.com/zhujiabin/p/10495207.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。