全局安装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 自定义全局方法,全局属性,全局变量的问题

相关文章
|
11月前
|
JavaScript 前端开发 Java
Vue路由与nodejs下载安装及环境变量的配置
Vue路由与nodejs下载安装及环境变量的配置
67 0
|
JavaScript 中间件 API
nuxt3:我们开始吧-开发-配置-部署(一)
nuxt3:我们开始吧-开发-配置-部署(一)
933 0
|
中间件 API
nuxt3:我们开始吧-开发-配置-部署(二)
nuxt3:我们开始吧-开发-配置-部署(二)
506 0
|
存储 应用服务中间件 nginx
nuxt3:我们开始吧-开发-配置-部署(三)
nuxt3:我们开始吧-开发-配置-部署(三)
991 0
UMI多环境配置
一般来说项目不止有dev和prod两个环境,umi可以通过环境变量 UMI_ENV 区分不同环境来指定配置。
1358 0
|
4月前
|
JavaScript 前端开发 Java
ruoyi-vue-pro 项目安装使用过程中的问题解决
ruoyi-vue-pro 项目安装使用过程中的问题解决
265 0
|
1月前
Nuxt项目的安装和使用
【8月更文挑战第7天】
30 2
|
1月前
|
资源调度 JavaScript 前端开发
搭建和部署nuxt项目
【8月更文挑战第4天】
|
4月前
|
JavaScript Java Maven
Vue2 脚手架下载及配置淘宝镜像--和ieda的配置和打开
Vue2 脚手架下载及配置淘宝镜像--和ieda的配置和打开
205 0
Vue2 脚手架下载及配置淘宝镜像--和ieda的配置和打开
|
9月前
|
JavaScript 小程序
VUE3(三十五)vite构建的项目配置使用.env文件
VUE3(三十五)vite构建的项目配置使用.env文件如标题所示:我要在vue3项目使用.env文件。 先介绍一下项目背景,项目使用VUE3.2 + vite2.9 + typescript搭建。 我基本断定,vue3使用.env文件的方法可能和vue2使用.env文件的方法可能是不同,关于vue2项目如何使用.env文件,请移步《VUE2(七)VUE配置env文件使用》
316 1