nuxt.js服务端渲染中axios和proxy代理的配置操作

需要npm axios？

刚开始，我以为需要像普通的vue SPA开发那样，需要npm axios，这种方式的确可以生效。但在使用时并不方便。尤其是设置代理比较麻烦，而且在asyncData里与在普通methods里使用方式不一样。

后来在nuxt的github上发现了nuxt是默认集成了axios的，所以不需要npm axios，但是需要进行适当的配置。

以上是百度到的，发现老是报错，现在网上的教程完全是在扯淡，npm axios 是不需要安装了，但是 @nuxtjs/axios 要安装啊

第一步：

npm 安装@nuxtjs/axios，文件根目录下安装，指令如下

npm install @nuxtjs/axios

第二步：

在 nuxt.config.js 文件中配置 axios 和 proxy 代理如下图：

方便你复制~~~~

import pkg from './package' export default { mode: 'universal', /* ** Headers of the page */ head: { title: pkg.name, meta: [ { charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' }, { hid: 'description', name: 'description', content: pkg.description } ], link: [ { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' } ] }, /* ** Customize the progress-bar color */ loading: { color: '#fff' }, /* ** Global CSS */ css: [ 'iview/dist/styles/iview.css' ], /* ** Plugins to load before mounting the App */ plugins: [ '@/plugins/iview' ], /* ** Nuxt.js modules */ modules: [ '@nuxtjs/axios' ], axios: { proxy: true, // 表示开启代理 prefix: '/api', // 表示给请求url加个前缀 /api credentials: true // 表示跨域请求时是否需要使用凭证 }, proxy: { '/api': { target: 'https:// NODE_ENV=production

千万别直接复制我上面的这段代码哦，因为每个项目的BASE_URL一般都是不一样的，你要换成自己项目的接口请求域名

第三步：配置nuxt.config.js

package.json中的scripts配置完成之后，还要去nuxt.config.js配置一下env，官方文档

// nuxt.config.jsmodule.exports = { mode: 'universal', env: { BASE_URL: process.env.BASE_URL, NODE_ENV: process.env.NODE_ENV }}

第四步：如何使用

使用是最简单的，直接写process.env.BASE_URL就可以了，比如在我们的axios配置文件里使用process.env.BASE_URL

或者你在任意页面console.log(process.env.BASE_URL)都是可以打印得出来的

从此以后，只需要执行不同的打包命令就可以自动设置BASE_URL和NODE_ENV了，告别频繁的注释和取消注释，潇洒的删除你的if...else...设置baseUrl的文件吧！

以上这篇nuxt.js服务端渲染中axios和proxy代理的配置操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

相关文章

最新文章

热门文章

猜你喜欢