TIP

使用nuxtjs过程中遇到的一些问题，记录一下

axios使用

nuxt.config.js中配置

{
  plugins: [
    '~/plugins/axios.js', // 在plugins目录下创建axios.js配置axios拦截器
  ],
  modules: [
    // https://go.nuxtjs.dev/axios
    '@nuxtjs/axios',
  ],

  // Axios module configuration: https://go.nuxtjs.dev/config-axios
  axios: {
    proxy: true, // 开启代理
    prefix:  '/api', // 自动添加前缀
    // browserBaseUrl: 'http://localhost:3331' // 使用gernerate时，接口地址要这样配置，同时prefix为空，接口服务要允许跨域
  },
  
  proxy: {
    // 所有url中带‘/api’的都代理到target里，同时将‘/api’替换为‘’
    '/api': { target: 'http://localhost:3331', pathRewrite: {'^/api': ''}} 
  },
}

axios拦截器

// plugins/axios.js
export default function ({ $axios, redirect, store, app}) {
  $axios.onRequest(config => {
    if(store.state.token) {
      config.headers.Authorization = store.state.token;
    }
  })
  $axios.onError(error => {
    if (error.response.status === 500) {
      redirect('/sorry')
    } else if (error.response.status === 401) {
      store.commit('saveToken', null);
      store.commit('saveUserInfo', null);
      // 使用了bootstrap-vue 挂载到全局的toast 创建项目时选择的bootstrap预设
      app.router.apps[0].$bvToast.toast(`登录过期，请重新登录！`, {
        title: '温馨提示',
        autoHideDelay: 5000,
        variant: 'danger'
      })
      setTimeout(() => {
        window.location.href = '/';
      }, 3000)
    }
  })
}

localstorage使用

在服务端渲染中，想要在store里使用localstorage是不行的，node环境没有window对象，借助vuex-persistedstate实现本地存储。 yarn add vuex-persistedstate

nuxt.config.js配置

{
  plugins: [
    { src: '~/plugins/localStorage.js', ssr: false }
  ]
}

localstorage配置

// /plugiins/localStorage.js
import createPersistedState from 'vuex-persistedstate';

export default ({store}) => {
  window.onNuxtReady(()=>{
    createPersistedState({
        key: 'store', // 存在localstorage中的key
        paths: ['token', 'userInfo'] // store中要存储的值
    })(store);
  })
}

使用

不必修改store，会自动使用

部署

gernerate部署，直接将dist目录上传到服务器，配置就是

build部署

在服务器执行build直接卡着不动，选择在本地build，服务器start

本地 yarn build

将.nuxt static package.json nuxt.config.js上传到服务器，执行yarn

利用 pm2 管理进程 默认时3000端口 pm2 start yarn --name xxx -- start

配置nginx代理，其他配置自行百度，这里记录api处理

location /api/ {
        rewrite ^/api/(.*) /$1 break;
        # api地址
        proxy_pass http://0.0.0.0:3331; 
}
location / {

}

但是asyncData里面的请求拦截不到

// nuxt.config.js
// baseURL与proxy不能同时设置，所以换种方式
const baseUrl = process.env.NODE_ENV==='production'?{ baseURL: 'https://www.xxx.com/api' } : {};
{
  axios: {
    ...baseUrl
  }
}