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

时间:2021-05-26

需要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代理的配置操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章