移动端项目在nuxt中使用rem.js

把近期项目中的nuxt配置rem.js分享下，配置后可以在项目中使用rem的单位

第一种， 在nuxt.config.js中的head 配置项中配置， 将rem.js放在static目录下，方便配置路径

 head: {
		  script: [
		     	 { src: '/rem.js', type: 'text/javascript', charset: 'utf-8'}
		 ],
  	},

第二种 （适用于往head中引入js）

	head: {
	  	script: [{ innerHTML: require('./assets/js/flexible'), type: 'text/javascript', charset: 'utf-8'}],
	 	 __dangerouslyDisableSanitizers: ['script']
	}

以下是我用的rem.js的内容

(function (win) {
    var doc = win.document;
    var docEl = doc.documentElement;
    var tid;
    function refreshRem() {
        var width = docEl.getBoundingClientRect().width;
        if (width > 750) { // 最大宽度
            width = 750;
        }
        var rem = width / 7.5;
        docEl.style.fontSize = rem + 'px';
    }
    win.addEventListener('resize', function () {
        clearTimeout(tid);
        tid = setTimeout(refreshRem, 300);
    }, false);
    win.addEventListener('pageshow', function (e) {
        if (e.persisted) {
            clearTimeout(tid);
            tid = setTimeout(refreshRem, 300);
        }
    }, false);
    refreshRem();
})(window);

如果在项目中使用less或sass变量全局注入，不用单独引入的就配置如下

module.exports = {
===========
 modules: [
    '@nuxtjs/style-resources'
  ],
 styleResources: {
    less: '@/assets/style/less/default.less'  // less文件路径
  },
  =======
}
// 配置完就可以全局使用了less变量了