资讯专栏INFORMATION COLUMN

Nuxt.js踩坑分享

nidaye / 2516人阅读

摘要:但是解决过程并不是很顺利的,在阅读中文文档时,忽略版本号,按照上面的提示进行操作,发现不能成功,后来各种,最后发现了该解决方案。发生在这个问题的原因时,服务端并没有或对象。

构建问题 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. 如何使用预处理器
背景:在组件中的