全局安装nuxt_nuxt 项目安装及环境配置

简介: 【8月更文挑战第5天】

modules: ['@nuxtjs/style-resources'],

build: {

styleResources: {

less: ['assets/less/_theme.less','assets/less/_mixins.less']

}

}

axios篇

使用nuxt提供的axios插件,没有安装的时候安装下npm install @nuxtjs/axios

在nuxt.config.js中进行配置

plugins: ['@/plugins/axios',

{src: '@/plugins/common.js', ssr: false}

],modules: ['@nuxtjs/axios',]

创建 plugins/axios.js 并定义axios的拦截器,定义请求的各个阶段需要进行的处理

export default function({ $axios, redirect }) {//request interceptor

$axios.interceptors.request.use(

config=>{//do something before request is sent

returnconfig

},

error=>{//do something with request error

returnPromise.reject(error)

}

)

$axios.onRequest(config=>{

console.log('Making request to ' +config.url)

})//response interceptor

$axios.interceptors.response.use(/**

  • Determine the request status by custom code

  • Here is just an example

  • You can also judge the status by HTTP Status Code*/response=>{

const res=response.dataif (res.code === 20000) {returnres

}else{

redirect('/404')//if the custom code is not 200, it is judged as an error.

}return Promise.reject(new Error(res.msg || 'Error'))

},

error=>{

console.log('err' + error) //for debug

returnPromise.reject(error)

}

)

$axios.onError(error=>{

const code= parseInt(error.response &&error.response.status)if (code === 400) {

redirect('/404')

}else if (code === 500) {

redirect('/500')

}

})

}

创建 libs/request.js 并封装get,post

相关资源:解决nuxt 自定义全局方法,全局属性,全局变量的问题

相关文章
|
JavaScript 中间件 API
nuxt3:我们开始吧-开发-配置-部署(一)
nuxt3:我们开始吧-开发-配置-部署(一)
1034 0
|
中间件 API
nuxt3:我们开始吧-开发-配置-部署(二)
nuxt3:我们开始吧-开发-配置-部署(二)
554 0
|
存储 应用服务中间件 nginx
nuxt3:我们开始吧-开发-配置-部署(三)
nuxt3:我们开始吧-开发-配置-部署(三)
1251 0
|
JavaScript
VUE框架搭建时,npm 下载项目资源时卡死
VUE框架搭建时,npm 下载项目资源时卡死采用cnpm 等方式
369 0
|
4月前
Nuxt项目的安装和使用
【8月更文挑战第7天】
46 2
|
4月前
|
资源调度 JavaScript 前端开发
搭建和部署nuxt项目
【8月更文挑战第4天】
|
5月前
|
JavaScript
vue3 创建项目、安装依赖、启动项目
vue3 创建项目、安装依赖、启动项目
270 0
|
5月前
|
JavaScript 安全 网络安全
Nuxt.js 速成(含使用宝塔实现nuxt项目部署)
Nuxt.js 速成(含使用宝塔实现nuxt项目部署)
618 0
|
缓存 资源调度 JavaScript
从零到一nvm、npm、cnpm、yarn、vue全套安装和环境配置以及创建新项目和如何运行人家的项目大全,最详细,保姆级
从零到一nvm、npm、cnpm、yarn、vue全套安装和环境配置以及创建新项目和如何运行人家的项目大全,最详细,保姆级
442 0
|
7月前
|
JavaScript
Vue 如何新建一个项目(如何安装依赖)
Vue 如何新建一个项目(如何安装依赖)
54 0