nuxt使用记录

「这是我参与11月更文挑战的第4天，活动详情查看：2021最后一次更文挑战」

Nuxt.js是一个基于 Vue.js 的通用应用框架。当需要使用服务端渲染时就可以使用nuxt，因为体验平滑开箱即用。 服务器端渲染 (SSR)的好处在于更好的 SEO。

创建nuxt项目

可以使用脚手架来创建：

1.使用npx创建

npx create-nuxt-app <项目名>

2.使用yarn创建（个人比较喜欢使用）

yarn create nuxt-app <项目名>

然后可以根据提示来选择需要的配置。 目录结构与vue是相似的

页面都是放在pages文件夹下面，nuxt会根据你创建的文件目录来帮你配置路由如官网所说：

layouts用来存放布局组件默认使用default,需要自定义布局时可以在该目录下创建vue文件，在使用时需要指定layout为使用的布局文件的文件名。

plugins目录下可以引入vue插件或者给路由添加点东西如：

import {
  Message,
} from 'element-ui';
import Cookies from "js-cookie";

export default ({ app }) => {
  app.router.beforeEach((to, from, next) => {
    let token = Cookies.get("token");
    if (to.path !== "/login") {
      if (token) {
        next();
      } else {
        Message.error("请登录后再操作")
        next("/login")
      }
    } else {
      next();
    }
  })
}

在plugins目录下添加好文件xxx后需要在nuxt.config.js中配置一下

  plugins: [
    '@/plugins/element-ui',
    '~/plugins/xxx',
  ],

配置axios拦截器:

import axios from 'axios';
import qs from 'qs';
import {
  Message,
} from 'element-ui';
import Cookies from "js-cookie";

let myredirect;
export default function ({redirect }) {
  myredirect = redirect;
}

export const $axios = axios.create({
  headers: {}
});

// service.defaults.baseURL = process.env.baseUrl;
$axios.withCredentials = true;
let contentType = 'Content-Type';
let token = Cookies.get("token");
$axios.interceptors.request.use((req) => {
  if(token){
    req.headers.token = token;
    if (!req.headers[contentType]) {
      req.headers = {
        'Content-Type': 'application/x-www-form-urlencoded',
        'Accept': 'application/json',
        'token': token
      }
    }
  }
  if (req.method === 'post') {
    req.data = qs.stringify(req.data);
  }
  return req;
}, (err) => Promise.reject(err));

$axios.interceptors.response.use((res) => {
  if (res.data.code === 401) {
    Message.error(res.data.msg); // 弹出错误提示
    Cookies.remove('token');
    myredirect.replace('/login'); // 跳转到登录
  }
  switch (res.status) {
    case 200:
      return res.data;
    case 500:
      break;
    case 401:
    break;
  }
}, (err) => Promise.reject(err));

注意：使用myredirect并不能跳转，目前除了使用中间件我没有找到在拦截器中跳转路由的方法。

配置环境可以创建一个env.js文件如：

module.exports = {
  dev: {
    MODE: 'dev',
    BASE_URL: '', //测试服务器地址
    FILE_URL: ''
  },
  pro: {
    MODE: 'pro',
    BASE_URL: '', //正式服务器地址
    FILE_URL: ''
  }
}

然后在nuxt.config.js中引入并在设置即可

  env: {
    baseUrl: env[process.env.MODE].BASE_URL,
    fileUrl: env[process.env.MODE].FILE_URL,
  }

需要在启动项目时使用 cross-env MODE=xxx，代理也可在该文件中设置

  proxy: {
    '/api': {
      //要访问的跨域的api的域名
      target: env[process.env.MODE].BASE_URL,
      changOrigin: true,
    }

  },

在nuxt.config文件中可以设置很多具体的参考官网，基础使用的话照着官网梭哈就可，只需要注意一下细节，其余没啥大问题。