当前位置: 首页 > Web前端 > HTML5

Nuxt.js服务端渲染使用rem

时间:2023-04-05 14:23:18 HTML5

1、下载flexible.js加载阿里的cdn文件http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js或者把下载的文件放在static中即,2在静态资源文件中,下载postcss-px2remnpminstall--savepostcss-px2rem3,配置nuxt.cofig.js并在head添加脚本:[{src:'/rem/flexible.js',type:'text/javascript',charset:'utf-8'}],在构建中添加postcss:[require('postcss-px2rem')({remUnit:75})],completenuxt.config.jsmodule.exports={mode:'universal',/***页面标题*/head:{title:process.env.npm_package_name||'',meta:[{charset:'utf-8'},{name:'viewport',content:'width=device-width,initial-scale=1'},{hid:'description',name:'描述',内容:process.env.npm_package_description||''}],链接:[{rel:'icon',类型:'image/x-icon',href:'/favicon.ico'}],脚本:[{src:'/rem/flexible.js',type:'text/javascript',charset:'utf-8'}],},/***自定义进度条颜色*/loading:{color:'#fff'},/***全局CSS*/css:['element-ui/lib/theme-chalk/index.css',{src:'~assets/css/index.scss',lang:'scss'}],/***在安装应用程序之前加载的插件*/plugins:['@/plugins/element-ui'],/***Nuxt.jsdev-modules*/buildModules:[],/***Nuxt.jsmodules*/modules:[],/***构建配置*/build:{extractCSS:{allChunks:true},transpile:[/^element-ui/],postcss:[require('postcss-px2rem')({remUnit:75})],/***你可以在这里扩展webpack配置*/extend(config,ctx){}}}配置成功: