NuxtJS(2)执行npm run dev报错：vue-ls本地存储不支持，如何解决？

问题原因 #

Nuxt是服务端渲染(SSR)框架，服务端环境不存在浏览器的localStorage对象，vue-ls默认配置使用local存储时，服务端初始化阶段检测不到该对象，就会抛出这个报错。

可行解决方案 #

• 按需配置存储类型
  在vue-ls的初始化文件（比如plugins/vue-ls.js）里，通过环境判断指定服务端用内存存储、客户端用本地存储：

  import Vue from 'vue'
  import Storage from 'vue-ls'
  
  const lsOptions = {
    namespace: 'nuxt_app_',
    storage: process.client ? 'local' : 'memory'
  }
  
  Vue.use(Storage, lsOptions)
  

• 仅在客户端加载vue-ls
  如果服务端不需要用到vue-ls，直接在nuxt.config.js的插件配置里指定仅客户端加载：

  plugins: [
    { src: '~/plugins/vue-ls.js', mode: 'client' }
  ]
  

• 模拟服务端localStorage（可选）
  若必须在服务端处理相关逻辑，可手动模拟localStorage对象，在vue-ls初始化前执行：

  if (process.server) {
    global.localStorage = {
      getItem: () => null,
      setItem: () => {},
      removeItem: () => {}
    }
  }
  

验证 #

修改完成后重新执行npm run dev，服务端不会再抛出该错误，客户端可正常使用localStorage功能。

内容的提问来源于stack exchange，提问作者Nitish K.