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)
        
    })
})();

你可能感兴趣的:(nuxt.js项目引入rem文件)