Nuxt.js踩坑总结分享

本篇文章主要介绍了Nuxt.js踩坑总结分享,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

构建问题

1. 如何在 head 里面引入js文件?

背景: 在标签中,以inline的形式引入flexible.js文件。本项目主要为移动端项目,引入flexible.js 实现移动端适配问题。
Nuxt.js 通过 vue-meta 实现头部标签管理,通过查看文档发现,可以按照如下方式配置:

 // nuxt.config.js head: { script: [ { innerHTML: 'console.log("hello")', type: 'text/javascript', charset: 'utf-8'} ] }

结果,生成 html:

复制代码 代码如下:



我们发现 vue-meta 把引号做了转义处理,加入 __dangerouslyDisableSanitizers: ['script'] 后,就不会再对这些字符做转义了,该字段使用需慎重!

接下来,要把 console.log("hello") 的内容替换成 flexible.js,配置升级之后:

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

踩坑成功,下一个坑...

2. 如何使用预处理器