首页 > web前端 > js教程 > 正文

Nuxt.js常见的一些问题(详细教程)

亚连
发布: 2018-06-11 15:36:48
原创
4824 人浏览过

本篇文章主要介绍了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:

<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(&#39;./assets/js/flexible&#39;), type: &#39;text/javascript&#39;, charset: &#39;utf-8&#39;}],
 __dangerouslyDisableSanitizers: [&#39;script&#39;]
}
登录后复制

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

2. 如何使用预处理器

背景:在组件中的