mpvue 同时开发和打包成H5和微信小程序（简易模板）_mpvue项目打包成h5

作者：繁依Fanyi0 | 2024-07-01 23:10:20

踩

mpvue项目打包成h5

开始

这个项目是一个mpvue 的demo, 没有具体的业务实现方法，只有简单的页面切换，还有常用的一些方法封装，总体提供分开打包开发的思路

github源码 => https://github.com/Aimee1608/mpvuedemo

需要看详细版有项目内容的，可以看这篇文章，有详细说明 https://blog.csdn.net/aimee1608/article/details/80757077

目录结构

.
├── README.md
├── build                       小程序运行打包配置文件
│   ├── build.js
│   ├── check-versions.js
│   ├── dev-client.js
│   ├── dev-server.js
│   ├── utils.js
│   ├── vue-loader.conf.js
│   ├── webpack.base.conf.js
│   ├── webpack.dev.conf.js
│   └── webpack.prod.conf.js
├── buildH5                    H5运行打包配置文件
│   ├── build.js
│   ├── check-versions.js
│   ├── dev-client.js
│   ├── utils.js
│   ├── vue-loader.conf.js
│   ├── webpack.baseH5.conf.js
│   ├── webpack.devH5.conf.js
│   └── webpack.prodH5.conf.js
├── config                   小程序运行打包配置文件         
│   ├── dev.env.js
│   ├── index.js
│   └── prod.env.js
├── configH5                H5运行打包配置文件
│   ├── dev.env.js
│   ├── index.js
│   └── prod.env.js
├── dist                    小程序打包生成的文件目录
│   ├── app.js
│   ├── app.json
│   ├── app.wxss
│   ├── components
│   │   ├── card$79c1b934.wxml
│   │   ├── counter$6c3d87bf.wxml
│   │   ├── index$622cddd6.wxml
│   │   ├── logs$31942962.wxml
│   │   └── slots.wxml
│   ├── copy-asset
│   │   └── assets
│   │       └── logo.png
│   ├── pages
│   │   ├── counter
│   │   │   ├── main.js
│   │   │   ├── main.wxml
│   │   │   └── main.wxss
│   │   ├── index
│   │   │   ├── main.js
│   │   │   ├── main.wxml
│   │   │   └── main.wxss
│   │   └── logs
│   │       ├── main.js
│   │       ├── main.json
│   │       ├── main.wxml
│   │       └── main.wxss
│   └── static
│       ├── css
│       │   ├── app.wxss
│       │   ├── pages
│       │   │   ├── counter
│       │   │   │   └── main.wxss
│       │   │   ├── index
│       │   │   │   └── main.wxss
│       │   │   └── logs
│       │   │       └── main.wxss
│       │   └── vendor.wxss
│       ├── img
│       │   └── girl.png
│       └── js
│           ├── app.js
│           ├── manifest.js
│           ├── pages
│           │   ├── counter
│           │   │   └── main.js
│           │   ├── index
│           │   │   └── main.js
│           │   └── logs
│           │       └── main.js
│           └── vendor.js
├── distH5                          H5打包生成的文件目录
│   ├── index.html
│   └── static
│       ├── css
│       │   └── app.css
│       ├── img
│       │   ├── girl.png
│       │   └── logo.png
│       └── js
│           ├── app.js
│           ├── manifest.js
│           └── vendor.js
├── index.html                     入口index.html 页面
├── package-lock.json
├── package.json                   安装配置文件
├── project.config.json
├── src                             
│   ├── App.vue                     小程序入口vue
│   ├── AppH5.vue                   H5入口vue
│   ├── api                         小程序和H5分别封装的方法
│   │   ├── httpService.js
│   │   └── wxService.js
│   ├── assets                     静态资源文件
│   │   └── logo.png
│   ├── components                  组件
│   │   └── card.vue
│   ├── main.js                     小程序入口js
│   ├── mainH5.js                   H5入口js
│   ├── pages                       页面内容
│   │   ├── counter
│   │   │   ├── index.vue
│   │   │   └── main.js
│   │   ├── index
│   │   │   ├── index.vue
│   │   │   └── main.js
│   │   └── logs
│   │       ├── index.vue
│   │       └── main.js
│   ├── router                      H5路由
│   │   └── index.js
│   ├── store                       vuex存储
│   │   └── index.js
│   └── utils                       js封装方法
│       └── index.js
└── static                          静态资源文件
    └── img
        └── girl.png
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127

简易说明

路由跳转

<template>
  <div class="container">
      <!-- 图片引用的两种方式 -->
      <img class="girl" :src="imgSrc +'static/img/girl.png'" alt="">
      <img class="logo" src="../../assets/logo.png" alt="">
    <card :text="motto"></card>
    <form class="form-container">
      <input type="text" class="form-control" v-model="motto" placeholder="v-model" />
      <input type="text" class="form-control" v-model.lazy="motto" placeholder="v-model.lazy" />
    </form>
    <!-- 路由跳转 -->
    <a @click="gotoGame('pages/counter/main')" class="counter">去往Vuex示例页面</a>
    <a @click="gotoGame('pages/logs/main')" class="counter">去往logs页面</a>
  </div>
</template>

<script>
// 组件引用
import card from '@/components/card'

export default {
  data () {
    return {
      motto: 'Hello World'
    }
  },
  components: {
    card
  },
  methods: {
     gotoGame (path) {
        this.reLaunchPageTo(this.router + path)
     }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

分别封装方法

H5 mainH5.js方法

Vue.mixin({
  data () {
    return {
      service: '', // 服务
      router: '/', // 路由路径
      imgSrc: '' // 图片路径
    }
  },
  methods: {
      newroot () {
          return  this.$route
      },
      navigatePageTo (url) {
          this.$router.push(url)
      },
      reLaunchPageTo (url) {
          this.$router.replace(url)
      },
      setStorageSync (name, data) {
          sessionStorage.setItem(name, JSON.stringify(data))
      },
      getStorageSync (name) {
          return JSON.parse(sessionStorage.getItem(name))
      }
  },
  created () {
      console.log('chrome')
      this.service = httpService
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

小程序main.js

Vue.mixin({
  data() {
    return {
      service: '',
      router: '/',
      imgSrc: '/'
    }
  },
  methods: {
      newroot () {
          return this.$root.$mp
      },
      navigatePageTo (url) {
          wx.navigateTo({url: url})
      },
      reLaunchPageTo (url) {
          wx.reLaunch({url: url})
      },
      setStorageSync (name, data) {
          wx.setStorageSync(name, data)
      },
      getStorageSync (name) {
          return wx.getStorageSync(name)
      }
  },
  created() {
      // console.log('wx')
      this.service = wxService
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

vuex 数据存储

小程序store 直接挂在 Vue原型上

Vue.prototype.$store = store1

H5vue 还是和之前一样

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
  store
})1
2
3
4
5
6
7

样式编译

如遇样式错乱，注意.postcssrc.js

module.exports = {
  "plugins": {
    // "postcss-mpvue-wxss": {}, // 打包成H5时注释此行
    "postcss-import": {},
    "postcss-url": {},
   // to edit target browsers: use "browserslist" field in package.json
    "autoprefixer": {}
  }
}1
2
3
4
5
6
7
8
9

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop】