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
```
简易说明
路由跳转
```
// 组件引用
import card from '@/components/card'
export default {
data () {
return {
motto: 'Hello World'
}
},
components: {
card
},
methods: {
gotoGame (path) {
this.reLaunchPageTo(this.router + path)
}
}
}
去往Vuex示例页面 去往logs页面 // 组件引用import card from'@/components/card'exportdefault{ data () {return{ motto:'Hello World'} }, components: { card }, methods: { gotoGame (path) {this.reLaunchPageTo(this.router + path) } }}
去往Vuex示例页面 去往logs页面 // 组件引用import card from'@/components/card'exportdefault{ data () {return{ motto:'Hello World'} }, components: { card }, methods: { gotoGame (path) {this.reLaunchPageTo(this.router + path) } }}
```
分别封装方法
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
}
})
```
小程序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
}
})
```
vuex 数据存储
小程序store 直接挂在 Vue原型上
```
Vue.prototype.$store = store
```
H5vue 还是和之前一样
```
new Vue({
el: '#app',
router,
components: { App },
template: '',
store
})
```
样式编译
如遇样式错乱，注意.postcssrc.js
```
module.exports = {
"plugins": {
// "postcss-mpvue-wxss": {}, // 打包成H5时注释此行
"postcss-import": {},
"postcss-url": {},
// to edit target browsers: use "browserslist" field in package.json
"autoprefixer": {}
}
}
```
