后端常规开发人员
后端常规开发人员

Nuxt.js常见问题和优化

Nuxt.js常见问题和优化

  • 1. 常见问题和解决方案
    • 1.1 NuxtServerError connect ECONNREFUSED 127.0.0.1:80
    • 1.2 如何在 head 里面引入js文件?
    • 1.3 nuxt使用less,sass等预处理器
    • 1.4 如何使用px2rem
    • 1.5 如何拓展 webpack 配置
    • 1.6 如何添加 vue plugin
    • 1.7 如何修改环境变量 NODE_ENV
    • 1.8 Window 或 Document 对象未定义？
    • 1.9 按需引入(UI框架等等)
    • 1.10 不想服务端渲染的地方
    • 1.11 nuxt必须在接口地址前加上访问域名
  • 2. 总结:
  • 3. BUG以及解决方案
    • 3.1 如何在组件中使用异步数据？
    • 3.2 为什么 Nuxt.js 应用的页面会出现闪烁？
    • 3.3 如何编辑主机和端口配置？
    • 3.4 给nuxt的localhost配置https

1. 常见问题和解决方案

1.1 NuxtServerError connect ECONNREFUSED 127.0.0.1:80

原因: asyncData方法异步请求数据时，以为/api/${params.id}这个接口的网址是 127.0.0.1:80, 所以将请求发送给了127.0.0.1:80，而我的接口服务器并没有跑在80端口上，所以报错。

解决方法:

  1. 将node服务器端口改成 127.0.0.1:80
  2. 将接口服务器端口改成 127.0.0.1:80
  3. 将asyncData方法使用的请求url加上域名+端口，如下所示
export default {
  asyncData ({ params }) {
    return axios.get(`https://127.0.0.1:3000/api/${params.id}`)
    .then((res) => {
      return { title: res.data.title }
    })
  }
}

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

背景: 在标签中，以inline的形式引入flexible.js文件。本项目主要为移动端项目，引入flexible.js 实现移动端适配问题。

Nuxt.js 通过 vue-meta 实现头部标签管理，通过查看文档发现，可以按照如下方式配置：

head: {
  script: [{ innerHTML: require('./assets/js/flexible'), type: 'text/javascript', charset: 'utf-8'}],
  __dangerouslyDisableSanitizers: ['script']
}

1.3 nuxt使用less,sass等预处理器

背景：在组件中的