前端开发所踩过的坑

本文摘要

来自摩拜前端团队 yingye ，如有不对地方请指正

本文主要分享构建和开发中遇到的坑：比如预编译的支持、浏览器环境的 window 对象支持以及 ENV 的配置等等

欢迎关注本系列，留言分享 ssr 的一些经验

构建问题

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('./assets/js/flexible'), 
    type: 'text/javascript', 
    charset: 'utf-8'
   }
  ],
  __dangerouslyDisableSanitizers: ['script']
}

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

2如何预处理器?

背景：在组件中的