// 不要使用这种方式引入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)
})
})();