Nuxt 配置踩坑记录(2)

最新推荐文章于 2024-09-02 08:27:50 发布

zxf13717561643

最新推荐文章于 2024-09-02 08:27:50 发布

阅读量1k

点赞数

分类专栏： Nuxt配置文章标签： vue nuxt iconfont配置 axios配置

本文链接：https://blog.csdn.net/zxf13598202302/article/details/107259099

版权

本文记录了在Nuxt.js项目中遇到的配置问题，包括px2rem转px2vw以解决页面缩放问题，详细介绍了Iconfont的链接与本地引入方式，以及Axios的配置。同时提到了Vant的按需引入和全局函数的设置，最后提及了storage与微信o2o认证的挑战。

摘要由CSDN通过智能技术生成

1、px2rem 到 px2vw

今天来测试了昨天新配的 postcss-px2rem-exclude, 发现项目运行时有个令人头大的问题，大概率是因为flexable.js在服务端渲染的原因，尽管文件时配置在 head 里面的，但是fontSize的计算速度使页面载入时会因为计算而有个放大缩小的过程，在手机上尤其明显，在经理了几个小时的挣扎后（期间也试了在一开始隐藏body，在计算出fontsize时显示body，但是这里根本获取不到body的visibility ，也修改不了，定时器也不行），决定放弃px2rem，还是使用 vw + postcss-px-to-viewport 达到类似的效果

首先安装 postcss-px-to-viewport, 当然要先安装postcss哦

 yarn add -D postcss-px-to-viewport

npm install postcss-px-to-viewport --save-dev

nuxt.config.js 配置

方便复制：这里viewportwidth 按设计稿大小填就行了，然后样式正常px写就好了，打包后会自动转换哦

            plugins: {
                // 通过传递 false 来禁用插件
                'postcss-url': false,
                'postcss-nested': {},
                'postcss-responsive-type': {},
                'postcss-hexrgba': {},
                'postcss-px-to-viewport': {
                    unitToConvert: 'px',
                    viewportWidth: 750,
                    unitPrecision: 5, // 其余都顾名思义， (Number) The decimal numbers to allow the vw units to grow to.
                    viewportUnit: 'vw',
                    fontViewportUnit: 'vw',
                    exclude: /node_modules|vant/
                }
            },

2、Nuxt 中引入 iconfont，这里我自己给自己挖了个坑，