Nuxt.js踩坑总结分享

构建问题

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

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

rush:js;"> // 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，配置升级之后：

rush:js;"> head: { script: [{ innerHTML: require('./assets/js/flexible'),charset: 'utf-8'}],__dangerouslydisableSanitizers: ['script'] }

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

2. 如何使用预处理器

背景：在组件中的