vue2 create appname移动端适配

jjw_zyfx

已于 2023-04-01 15:05:34 修改

阅读量503

点赞数

分类专栏：配置 vue 文章标签： vue.js javascript 前端

于 2019-09-27 21:34:25 首次发布

本文链接：https://blog.csdn.net/jjw_zyfx/article/details/101562489

版权

vue 同时被 2 个专栏收录

138 篇文章 1 订阅

订阅专栏

配置

50 篇文章 0 订阅

订阅专栏

第一步: 创建完项目后安装插件


npm install postcss-pxtorem --save-dev

npm install amfe-flexible --save-dev

第二步：

在main.js中引入amfe-flexible

import 'amfe-flexible'

第三步

vue.config.js中配置的内容为：

// const { postCssPxToRem } = require('postcss-pxtorem')
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  css: {
    loaderOptions: {
      postcss: {
        postcssOptions: {
          plugins: [
            require('postcss-pxtorem')({ // 把px单位换算成rem单位
              // rootValue: 37.5, // vant官方使用的是37.5
              rootValue ({ file }) {
                // 如果是 Vant 的样式就按照 37.5 处理转换
                // 如果是我们自己的样式就按照 75 处理转换
                return file.indexOf('vant') !== -1 ? 37.5 : 75
                // 这样做的好处是当拿到width为750px的设计稿是其中的内容width是
                // 多少就直接写多少即可，不用除以2了
              },
              // selectorBlackList: ['vant', 'mu'], // 忽略转换正则匹配项
              propList: ['*']
            })
          ]
        }
      }
    }
  }
})

最后重新运行即可