脚本宝典收集整理的这篇文章主要介绍了mpvue小程序转H5，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

前提：mpvue小程序使用fly作为http请求
转换后的目录结构如下：

├─build
├─config
├─src
│ ├─components
│ ├─pages
│ ├─Store
│ ├─router
│ ├─App.vue
│ └─main.js
├─static
├─.babelrc
├─.edITorconfig
├─.eslintignore
├─.eslintrc.js
├─.gitignore
├─.postcssrc.js
├─index.htML
├─package.json
└─README.md

修改配置文件

• 用vue-cli脚手架初始化一个项目

    vue init webpack my-PRoject

• 将mpvue小程序中src文件夹和static文件夹拷贝到my-project中，覆盖my-project原来的文件夹

• 修改main.js文件

     删除关于小程序相关配置

  PE="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" // 小程序中使用 VAR Fly=require("flyio/dist/npm/wx") // web中使用 var Fly=require("flyio/dist/npm/fly") // 指定挂载元素 new Vue({ el: '#app', template: '', components: { App } })" title="" data-original-title="复制">

      // 小程序中使用
      var Fly=require("flyio/dist/npm/wx") 
      // web中使用
      var Fly=require("flyio/dist/npm/fly") 
      // 指定挂载元素
      new Vue({
        el: '#app',
        template: '<App/>',
        components: { App }
      })

• 修改APP.vue

     删除关于小程序的相关配置，添加如下代码  
  

  <template>
    <div id="app">
      <router-view></router-view>
    </div>
  </template>

配置路由

• 配置相关路由

  ../pages/${name}/index.vue`], resolve) } export default new Router({ routes: [ { path: '/', name: 'index', component: getPage('index') } ] })" title="" data-original-title="复制">

  import Vue From 'vue'
  import Router from 'vue-router'
  
  Vue.use(Router)
  const getPage = name => {
    return resolve => require([`../pages/${name}/index.vue`], resolve)
  }
  
  export default new Router({
    routes: [
      {
        path: '/',
        name: 'index',
        component: getPage('index')
      }
    ]
  })

• 修改main.js

     将路由挂载到根组件
  

  Vue({ el: '#app', router, template: '', components: { App } })" title="" data-original-title="复制">

  import router from './router'
  new Vue({
    el: '#app',
    router,
    template: '<App/>',
    components: { App }
  })

安装依赖

    cnpm install 

列表项目

    cnpm run dev
    运行中应该会出现一些错误，会提示安装flyio,安装便是
    解决一些错误，不出以外就可以跑起来了

脚本宝典总结

以上是脚本宝典为你收集整理的mpvue小程序转H5全部内容，希望文章能够帮你解决mpvue小程序转H5所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。