sunniejs/vue-h5-template

:tada:vue搭建移动端开发,基于vue-cli4.0+webpack 4+vant ui + sass+ rem适配方案+axios封装，构建手机端模板脚手架

vue-h5-template

基于 vue3 + vite + （nutui or varlet or vant） + sass + viewport 适配方案 + axios 封装，构建手机端模板脚手架

如果你不熟悉 vue3，想继续使用 vue2 开发的，可以点这里来获取 vue2-h5-template

详细的说明文档请点击查看

如果对你有帮助送我一颗珍贵的小星星（づ￣ 3 ￣）づ ╭❤ ～

关于我

扫描添加下方的微信并备注加交流群(已超过 200 人，只能邀请)，交流学习，及时获取代码最新动态。

如果你觉得该项目有给你带来帮助，方便了你的日常开发，可以请作者喝一杯 ☕ 支持持续的迭代

WechatPay	AliPay

Star History

vue-h5-template's Issues

打包会自动打开浏览器

每次build都会跳到浏览器，不知道怎么关闭它，谢谢。

一直提示跨域

接口一直跨域，但是接口在其他项目是正常运行的

再出个vite+vue3+ts的目前较为流行的组合吧

大佬稍加改造即可

脚手架还维护吗？

文档尽快升级吧

新版本发布了，戳手想试用了，希望尽快更新下文档

把路由抽离出来，多写点模块，现在功能太少了

建议把node-sass改为sass

您好，非常感谢对本项目的支持，您可以在此留下你的宝贵意见和想法。
也可以添加作者微信：sunnie_song ,学习交流ლ(°◕‵ƹ′◕ლ)。

建议把node-sass改为sass，解决下载问题

程序启动失败了

➜  vue-h5-template git:(vue-h5-template) yarn -v
1.22.18
➜  vue-h5-template git:(vue-h5-template) node -v
v14.19.2
➜  vue-h5-template git:(vue-h5-template) yarn install 
yarn install v1.22.18
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
[1/4] Resolving packages...
[2/4] Fetching packages...
warning [email protected]: The engine "pnpm" appears to be invalid.
[3/4] Linking dependencies...
[4/4] Building fresh packages...

$ husky install
husky - Git hooks installed
Done in 4.10s.
➜  vue-h5-template git:(vue-h5-template) yarn dev    
yarn run v1.22.18
$ vite
                                                                                                                                                                                                                               09:42:44
  vite v2.9.14 dev server running at:

  > Local:    http://localhost:3000/                                                                                                                                                                                           09:42:44
  > Network:  http://172.26.48.66:3000/                                                                                                                                                                                        09:42:44
                                                                                                                                                                                                                               09:42:44
  ready in 703ms.


 ERROR  Failed to resolve import "@nutui/nutui/dist/packages/Button/index.scss" from "src/plugins/nutUI.ts". Does the file exist?                                                                                              09:42:46


 ERROR  9:42:46 AM [vite] Internal server error: Failed to resolve import "@nutui/nutui/dist/packages/Button/index.scss" from "src/plugins/nutUI.ts". Does the file exist?                                                     09:42:46
  Plugin: vite:import-analysis
  File: /work/vue/vue-h5-template/src/plugins/nutUI.ts
  33 |    GridItem
  34 |  } from "@nutui/nutui";
  35 |  import '@nutui/nutui/dist/packages/Button/index.scss';
     |          ^
  36 |  import '@nutui/nutui/dist/packages/Cell/index.scss';
  37 |  import '@nutui/nutui/dist/packages/CellGroup/index.scss';
      at formatError (/work/vue/vue-h5-template/node_modules/vite/dist/node/chunks/dep-c9998dc6.js:39080:46)
      at TransformContext.error (/work/vue/vue-h5-template/node_modules/vite/dist/node/chunks/dep-c9998dc6.js:39076:19)
      at normalizeUrl (/work/vue/vue-h5-template/node_modules/vite/dist/node/chunks/dep-c9998dc6.js:58354:26)
      at processTicksAndRejections (internal/process/task_queues.js:95:5)
      at async TransformContext.transform (/work/vue/vue-h5-template/node_modules/vite/dist/node/chunks/dep-c9998dc6.js:58503:57)
      at async Object.transform (/work/vue/vue-h5-template/node_modules/vite/dist/node/chunks/dep-c9998dc6.js:39317:30)
      at async doTransform (/work/vue/vue-h5-template/node_modules/vite/dist/node/chunks/dep-c9998dc6.js:50037:29)

vue-skeleton-webpack-plugin怎么配置

一直配置都没有生效

body 上面的 12px 是什么情况？能修改或者去掉吗？

建议去掉 api qs

建议生成多页面配置

您好，非常感谢对本项目的支持，您可以在此留下你的宝贵意见和想法。
也可以添加作者微信：sunnie_song ,学习交流ლ(°◕‵ƹ′◕ლ)。

表示支持

懒得自己集成，简单看了代码，小项目直接用你这个脚手架，支持一波 👍

keep-alive不起作用

动态设置keep-alive有问题，返回时候不起作用

<keep-alive v-if="$route.meta.keepAlive">
  <router-view></router-view>
</keep-alive>
<router-view v-else></router-view>

修改为：

<keep-alive>
  <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view  v-if="!$route.meta.keepAlive"></router-view>

vue2-h5-template 是不是用 vue-cli 5 重构了

vue2-h5-template 分支里面 文件的写法和目录似乎是 vue-cli5的配置方法?

是不是用vue-cli5 重新写的?

请求后使用Toast回调返回上一页面会一直返回直到首页

你好，请使用下面的模板创建 issue 以帮助我们更快的排查问题，不规范的 issue 会被关闭，感谢配合。

Browser version [浏览器类型和版本]
微信开发者工具

vue-h5-template version [vue-h5-template 版本]
最新版

Vue version [Vue 版本]
2.6.11

reappear link [重现链接]
无

One-line summary [描述问题]
在请求返回使用Toast回调返回上一页面会一直返回直到首页

Other comments [其他信息]

.vue文件无法热更新

.vue文件无法热更新

sass版本就错误

npm i就没人遇到sass版本就错误的人吗？居然没人提出来？

建议把适配方案改为vw适配，rem的方案有点过时了

request.js的坑。。。

// respone拦截器
service.interceptors.response.use(
response => {
Toast.clear()
const res = response.data
if (res.status && res.status !== 200) { // 这里应该判断response.status
// 登录超时,重新登录
if (res.status === 401) {
store.dispatch('FedLogOut').then(() => {
location.reload()
})
}
return Promise.reject(res || 'error')
} else {
return Promise.resolve(res)
}
},
error => {
Toast.clear()
console.log('err' + error) // for debug
return Promise.reject(error)
}
)

nice

nice

vue-h5-template about of resolutions in package.json

npm i

Install fail! Error: Unsupported URL Type: npm:bin-wrapper-china

node：14.19.0
npm：6.14.16
nrm：https://registry.npmjs.org/

main.js中引入的index.scss样式重复

每个页面当中会出现多次index中的样式，而且先引入的index后引入的vant，但是index比vant优先级还要高

npm i 出错

shell> npm i --registry=https://registry.npm.taobao.org
npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npm.taobao.org/@babel/runtime/-/runtime-7.8.4.tgz - [not_found] document not found
npm ERR! 404
npm ERR! 404 '@babel/runtime@https://registry.npm.taobao.org/@babel/runtime/-/runtime-7.8.4.tgz' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

history模式的publicPath为 '/'更合适吧

当前配置publicPath:'./',会导致localhost/a/b这样的路径刷新无法加载的问题。而localhost/a正常显示，从其直接跳转到localhost/a/b也正常显示。但刷新就不OK啦

是否会升级vant到3.0版本？

您好，非常感谢对本项目的支持，您可以在此留下你的宝贵意见和想法。
也可以添加作者微信：sunnie_song ,学习交流ლ(°◕‵ƹ′◕ლ)。

.postcssrc.js调为75会导致vant的组件ui也会被更改，全部变1/2，应该需要忽略组件的css

module.exports = { plugins: { autoprefixer: { overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8'] }, 'postcss-pxtorem': { rootValue: 37.5, propList: ['*'], //selectorBlackList: ['van-'] } } }

module.exports = { plugins: { autoprefixer: { overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8'] }, 'postcss-pxtorem': { rootValue: 75, propList: ['*'], //selectorBlackList: ['van-'] } } }

按钮没垂直居中什么原因

您好，非常感谢对本项目的支持，您可以在此留下你的宝贵意见和想法。
也可以添加作者微信：sunnie_song ,学习交流ლ(°◕‵ƹ′◕ლ)。

热更新有问题

// 修复HMR config.resolve.symlinks(true);
修复不了 热更新

有考虑过，自定义vant ui主题色的实现嘛，vant ui貌似是less语言样式

您好，非常感谢对本项目的支持，您可以在此留下你的宝贵意见和想法。
也可以添加作者微信：sunnie_song ,学习交流ლ(°◕‵ƹ′◕ლ)。

关于 eslint prettier vetur 这三个工具的配置文章“催更”



使用内置模块报错

第一步

const { url } = require('url');

浏览器报错

Uncaught ReferenceError: require is not defined

网上查找原因之后修改为

import { createRequire } from 'module';
const require = createRequire(import.meta.url);
const { url } = require('url');

浏览器报错

Uncaught SyntaxError: The requested module '/@id/__vite-browser-external:module' does not provide an export named 'createRequire'

如何才能正常引用呢= =

IE还是有点问题

开本地环境运行，ie打开，报错了，build出来ie10还是有些问题，你的demo地址是正常的

大佬 有没有TS版本的

大佬 有没有TS版本的！！！！！！

请教一个问题

您好，非常感谢对本项目的支持，您可以在此留下你的宝贵意见和想法。
也可以添加作者微信：sunnie_song ,学习交流ლ(°◕‵ƹ′◕ლ)。

原生移动端的体验一般是前进刷新，后退不刷新。也会有在后一页修改提交了返回前一次刷新的，或者跳到后一页列表选择一项返回修改上一页的表单。
如果vue h5项目要模仿这个体验，有方案吗？
暂时是使用keepalive+include+vuex。还是思路错了？

请问打包后chunk-vendors文件多大？

就是依赖的node_modules里面的包打包后多大？

骨架屏vue-skeleton-webpack-plugin怎么配置

您好，非常感谢对本项目的支持，您可以在此留下你的宝贵意见和想法。
也可以添加作者微信：sunnie_song ,学习交流ლ(°◕‵ƹ′◕ლ)。

【每个h5需要的模块】可以只让中间部分滚动吗？头部跟底部都固定，且滚动条的顶部只能滚动到中间部分的顶部

您好，非常感谢对本项目的支持，您可以在此留下你的宝贵意见和想法。
也可以添加作者微信：sunnie_song ,学习交流ლ(°◕‵ƹ′◕ლ)。

如何在vue页面里修改title标题

首先，非常感谢你的项目。让我从vue新手能开始简单的写页面了。
有个问题想咨询一下，如何在类似about.vue里，修改最外面的title。

path: '/about',
name: 'About',
component: () => import('@/views/home/about'),
meta: { title: '关于我', keepAlive: false }
这里的title配置不起作用。

页面缓存keepAlive代码错误

Browser version [Chrome 87]

vue-h5-template version [vue-h5-template 版本]

Vue version [Vue 2.6.12]

code

     <keep-alive v-if="$route.meta.keepAlive">
        <router-view></router-view>
      </keep-alive>
      <router-view v-else></router-view>

应该写成

     <keep-alive>
        <router-view  v-if="$route.meta.keepAlive"></router-view>
      </keep-alive>
      <router-view v-else></router-view>

vue-h5-template 最新版vite插件抽取，已经使用了路由自动导入，src的router文件是不是还没有改

支持一下，我也有一款类似的 template ，希望多多交流

我也写过一个类似的 template 项目：vue-automation
看了下咱俩的 first commit 时间，还比你早了个小半年，既然都还在维护，希望以后能多多交流

why not update to vue3 and ts

您好，非常感谢对本项目的支持，您可以在此留下你的宝贵意见和想法。
也可以添加作者微信：sunnie_song ,学习交流ლ(°◕‵ƹ′◕ლ)。

安装依赖后，运行报错

ERROR Failed to compile with 1 errors 16:10:42
error in ./src/main.js

Syntax Error: E:\vue-H5\node_modules\eslint\lib\rules\no-octal-escape.js:41
/^(?:[^\\]|\.)*?\([0-3][0-7]{1,2}|[4-7][0-7]|0(?=[89])|[1-7])/su
^

SyntaxError: Invalid regular expression flags
at Array.forEach ()

@ multi (webpack)-dev-server/client?http://192.168.1.180:9020/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

执行stage，走的是env.production.js什么原因

您好，非常感谢对本项目的支持，您可以在此留下你的宝贵意见和想法。
也可以添加作者微信：sunnie_song ,学习交流ლ(°◕‵ƹ′◕ლ)。

toast组件封装有bug

CDN配置后项目打包运行错误

按照你的CDN配置后，项目打包npm run build , 运行打包文件，报错

错误位置：
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

require is not define

npm run lint问题

您好，非常感谢对本项目的支持，您可以在此留下你的宝贵意见和想法。
也可以添加作者微信：sunnie_song ,学习交流ლ(°◕‵ƹ′◕ლ)。

执行npm run lint 操作后，会报错
rror: Cannot find module './env.undefined'
Require stack:

• /Users/zsword/Desktop/Code/vue-app/src/config/index.js
• /Users/zsword/Desktop/Code/vue-app/vue.config.js
• /Users/zsword/Desktop/Code/vue-app/node_modules/@vue/cli-shared-utils/lib/module.js
• /Users/zsword/Desktop/Code/vue-app/node_modules/@vue/cli-shared-utils/index.js
• /Users/zsword/Desktop/Code/vue-app/node_modules/@vue/cli-service/bin/vue-cli-service.js
  Error: Cannot find module './env.undefined'
  Require stack:
• /Users/zsword/Desktop/Code/vue-app/src/config/index.js
• /Users/zsword/Desktop/Code/vue-app/vue.config.js
• /Users/zsword/Desktop/Code/vue-app/node_modules/@vue/cli-shared-utils/lib/module.js
• /Users/zsword/Desktop/Code/vue-app/node_modules/@vue/cli-shared-utils/index.js
• /Users/zsword/Desktop/Code/vue-app/node_modules/@vue/cli-service/bin/vue-cli-service.js

感觉是不是config中的index.js文件配置需要修改某些数据

新版本做的太棒了

一直用花裤衩的后台模板，习惯了花裤衩的axios的封装，没想到这次升级也做成了跟花裤衩类似的方案，赞赞赞~！！！希望能保持简洁，不用做过度集成，支持作者~！！！！！

谢谢作者

第一次在GitHub留言，前端小白，在自己做项目时候遇到了瓶颈来这里学习，有幸看到大佬的项目，看完直接爱了，好优雅的代码！大赞！