网站首页> 前端开发> vue.js> nuxt.js服务端渲染中axios和proxy代理的配置操作

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

时间:2020-11-07 08:50:08 阅读:7515次 来源:互联网

需要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 代理 如下图:

nuxt.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://www.apiopen.top', // 目标接口域名
   pathRewrite: {
    '^/api': '/', // 把 /api 替换成 /
    changeOrigin: true // 表示是否跨域
   }  
  }
 },
 
 /*
 ** Build configuration
 */
 build: {
  /*
  ** You can extend webpack config here
  */
  extend(config, ctx) {
  },
  vendor: ['axios'] // 为防止重复打包
 }
}

第三步:

在组件中使用

<template>
 <div>my</div>
</template>
<script>
export default {
 created () {
  this.allList()
 },
 methods: {
  allList () {
   this.$axios.post(`/novelSearchApi?name=盗墓笔记`).then(res => {
    console.log(res)
   })
  }
 }
 
}
</script>
<style scoped>
</style>

补充知识:nuxt.js配置BASE_URL(基本域名)和NODE_ENV(环境变量)

一直以来,开发环境和生产环境的数据接口域名不一样总是困扰着我

每次打测试包或者线上包,我都得手动切换域名,我相信很多人的做法跟这差不多,类似下面这样:

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

(你已经注意到,这个文件已经被我无情的删除了,因为我发现了属于我自己的新大陆)

每次打包都要切换注释,虽然也能接受,但是容易忘记或者出错,或者找这个配置文件都要找半天,

对于我这种反应迟钝、头脑经常性短路的人来说实在太痛苦了,

有痛点,那就要寻求解决方法:

第一步:安装 cross-env(这个迷你的包能够提供一个设置环境变量的scripts)

npm i cross-env -D

第二步:配置BASE_URL和NODE_ENV

我们不是有个package.json吗,里面是不是有个scripts对象?

// package.json
{
 "scripts": {
  "dev": "cross-env BASE_URL=https://devpc.17wawawa.com NODE_ENV=development nuxt",
  "start": "cross-env BASE_URL=https://devpc.17wawawa.com NODE_ENV=production nuxt start",
  "build": "cross-env BASE_URL=https://www.17wawawa.com NODE_ENV=production nuxt build",
  "test": "cross-env BASE_URL=https://test.17wawawa.com NODE_ENV=production nuxt generate",
  "generate": "cross-env BASE_URL=https://www.17wawawa.com NODE_ENV=production nuxt generate"
 },
}

先写cross-env,接着配置BASE_URL和NODE_ENV,

因为cross-env能跨平台地设置及使用环境变量,这样我们在执行不同的命令(npm run xxx)时,都会设置相应的BASE_URL(基本域名)和NODE_ENV(环境变量)

一定要注意,命令一定要写在末尾,比如我上面的nuxt、nuxt start、nuxt build等等,否则 npm run 时会报错

执行不同的命令就会自动设置不同的BASE_URL和NODE_ENV

npm run dev // BASE_URL=https://devpc.17wawawa.com NODE_ENV=development

npm run test // BASE_URL=https://test.17wawawa.com NODE_ENV=production

npm run generate // BASE_URL=https://www.17wawawa.com NODE_ENV=production

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

第三步:配置nuxt.config.js

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

// nuxt.config.js
module.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

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

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

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

以上这篇nuxt.js服务端渲染中axios和proxy代理的配置操作就是小编分享给大家的全部内容了。

本文地址:https://www.manongw.com/article/176.html

文章来源:转载于CSDN,转载网址为https://blog.csdn.net/qq_43258252/article/details/88644165

版权申明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 ezhongheng@126.com 举报,一经查实,本站将立刻删除。

相关文章
  • 本文主要介绍了详解vue 中 scoped 样式作用域的规则的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-11-05 08:41
  • 本文主要介绍了解决vue watch数据的方法被调用了两次的问题的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-11-08 09:37
  • 本文主要介绍了vue实现动态给id赋值,点击事件获取当前点击的元素的id操作的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-11-10 09:19
  • 本文主要介绍了html+vue.js 实现漂亮分页功能可兼容IE的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-11-08 09:32
  • 本文主要介绍了解决Vue watch里调用方法的坑的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-11-08 09:11
  • 本文主要介绍了vue中使用腾讯云Im的示例的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-10-24 10:26
  • 本文主要介绍了vant 中van-list的用法说明的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-11-12 11:04
  • 本文主要介绍了Vue 列表页带参数进详情页的操作(router-link)的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-11-13 16:21
  • 本文主要介绍了vue.js页面加载执行created,mounted的先后顺序说明的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-11-09 09:57
  • 本文主要介绍了vue 如何从单页应用改造成多页应用的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-10-23 11:11