nuxt.js项目引入rem文件

// 不要使用这种方式引入rem,因为import 这种导入的作用是把碎片化的文件合并到一起,刷新页面时,会报找不到document错误,这是ssr渲染造成的问题。
import '~/assets/js/rem.js'
正确的引入方式:

在 static 目录下,建立 js/rem.js 文件。
我们应该使用 script 标签在html 页面引入 rem.js 文件,但 nuxtjs 中没有 html 页面,所以我们需要写在 nuxt.config.js 中。
在 nuxt.config.js 文件中:

head: {
    script:[
        {type:"text/javascript", src: '/js/rem.js', async: true, defer: true },
        {type:"text/javascript",src:"https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"}//引入线上的js文件
    ]
},

config 页面中 head 属性中所描述的文件,都直接在 static 中查找。

nuxtjs 没有所谓的 index.html 入口页,这个 index.html 实际是有 nuxt.config.js 编译而成的。

iscroll 、swiper iview等插件,也应该用此种方式引入。

rem.js文件分享:

// 隔离作用域,避免全局变量的污染
!(function(){
    function setHtmlFontSize(){
        // 1.获取手机屏幕宽度
        var w = document.documentElement.getBoundingClientRect().width; //如果用window.innerwidth的话,改变窗口大小,不能够及时获取窗口大小
        // console.log(w);
        // 2.根据屏幕宽度计算html font-size大小, 7.5指的是设计稿的宽度为750,如果在公司中设计稿的尺寸为720,那么应该除以7.2
        var f = w/40;
        // 3.设置html 的font-szie
        document.documentElement.style.fontSize=f+"px";
    }
    setHtmlFontSize();
    window.addEventListener("resize",function(){
        // setTimeout 是为了解决在苹果手机上的闪屏情况
        setTimeout(function(){
            setHtmlFontSize();
        },300)
        
    })
})();
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容