H5页面移动端Vue项目搭建备忘

最新推荐文章于 2025-11-15 07:31:55 发布

原创最新推荐文章于 2025-11-15 07:31:55 发布 · 969 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #es6

日常记录同时被 2 个专栏收录

2 篇文章

订阅专栏

项目搭建

1 篇文章

订阅专栏

本文记录了一位开发者将基于vuecli4的PC端项目改造为移动端的过程，包括使用vwvh进行适配，配置postcss插件解决适配问题，安装vConsole进行移动端调试，以及引入vantUI和fastclick等库。还提到了关键文件vue.config.js、babel.config.js等的作用，并分享了遇到的错误及解决方案。

这两天在搭一个移动端的项目，原本有一个用vuecli4搭的pc端的框子，就借来用，改了点内容。
axios和router,vuex,sass之前已经配置有了，记录一下改移动端，补充修改的内容：

1.移动端适配

因为很久没做了，查了下资料，之前只知道rem适配，但是现在更流行vwvh适配，就去做了。
参考了大佬的教程：vw适配方案
但是原项目里根本就没有装postcss的任何依赖，所以对着把所有依赖都装上了:

npm i postcss-import postcss-url cssnano-preset-advanced autoprefixer postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano --S

装好之后配置了.postcssrc.js文件，因为设计稿给的是375px的尺寸，所以改了下postcss-px-to-viewport的部分:

module.exports = {
  plugins: {
    "postcss-import": {},
    "postcss-url": {},
    "postcss-aspect-ratio-mini": {},
    "postcss-write-svg": {
      utf8: false
    },
    "postcss-cssnext": {},
    "postcss-px-to-viewport": {
      viewportWidth: 375, //视窗的宽度（设计稿宽度）
      viewportHeight: 667,
      unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数
      viewportUnit: "vw", // 指定需要转换成的视窗单位，建议使用vw
      selectorBlackList: [".ignore", ".hairlines"], //指定不转换为视窗单位的类
      minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位
      mediaQuery: false // 允许在媒体查询中转换`px`
    },
    "postcss-viewport-units": {},
    cssnano: {
      preset: "advanced",
      autoprefixer: false,
      "postcss-zindex": false
    }
  }
};

然后运行时测试组件时，命令窗口报了一堆类似 “Error: PostCSS plugin xxxx requires PostCSS 8” 的错误，搜了下说是装的依赖版本太高了，然后改了下版本：

npm i postcss-import@10.0.0 postcss-url@8.0.0 cssnano-preset-advanced autoprefixer postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano --S

接着又发现在vw方案下，使用伪类选择符会报错,“already has a ‘content’ property, give up to overwrite it.”，补充了下.postcssrc的配置

"postcss-viewport-units": {
      filterRule: rule =>
        rule.selector.includes("::after") &&
        rule.selector.includes("::before") &&
        rule.selector.includes(":after") &&
        rule.selector.includes(":before")
    },

然后试了下，适配成功，搞其他的

2.移动端调试

考虑到手机调试，不方便查看console，装了个vConsole和vconsole-webpack-plugin，然后在vue.config.js添加了一段：

module.exports = {
configureWebpack: config => {
    let envType = process.env.NODE_ENV != "production";
    let pluginsDev = [
      new vConsolePlugin({
        filter: [],
        enable: envType
      })
    ];
    config.plugins = [...config.plugins, ...pluginsDev];
  }
}

方便在切换开发/生产模式时，自动关闭vConsole

3.其他

a.UI框架使用了vantUI，可以按需引入，不过我是全局引入。
b.装了fastclick防止多次点击，但是有人表示fastclick在ipad端可能导致点击缓慢的问题，所以在main.js里面补充了其他人的解决方法：

import fastClick from "fastclick";

fastClick.attach(document.body);

https://www.jianshu.com/p/67bae6dfca90

4.补充

因为没怎么自己搭过框架，对一些文件都不太熟，记录一下作用：
vue.config.js — 修改webpack配置
babel.config.js — babel配置修改
.gitignore — git提交忽略设置
.eslintrc.js — eslint规则配置
.eslintignore — eslint忽略设置
.env.production/.env.development 配置环境设置
.browserslistrc — 修改browserlist