本篇文章主要介绍了Nuxt.js踩坑总结分享,现在分享给大家,也给大家做个参考。
构建问题
1. 如何在 head 里面引入js文件?
背景: 在
标签中,以inline的形式引入flexible.js文件。本项目主要为移动端项目,引入flexible.js 实现移动端适配问题。// nuxt.config.js head: { script: [ { innerHTML: 'console.log("hello")', type: 'text/javascript', charset: 'utf-8'} ] }
结果,生成 html:
<script data-n-head="true" type="text/javascript" charset="utf-8">console.log("hello")</script>
我们发现 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. 如何使用预处理器
背景:在组件中的,