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


Posted in Javascript onNovember 06, 2020

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

Javascript 相关文章推荐
childNodes.length与children.length的区别
May 14 Javascript
JavaScript 变量基础知识
Nov 07 Javascript
Riot.js 快速的JavaScript单元测试框架
Nov 09 Javascript
jQuery+HTML5美女瀑布流布局实现方法
Sep 21 Javascript
原生JS实现的多个彩色小球跟随鼠标移动动画效果示例
Feb 01 Javascript
vue-cli3.0配置及使用注意事项详解
Sep 05 Javascript
vue根据值给予不同class的实例
Sep 29 Javascript
详解vuex中action何时完成以及如何正确调用dispatch的思考
Jan 21 Javascript
基于Vue插入视频的2种方法小结
Apr 02 Javascript
python虚拟环境 virtualenv的简单使用
Jan 21 Javascript
JavaScript十大取整方法实例教程
Dec 03 Javascript
JavaScript代码实现简单计算器
Dec 27 Javascript
微信小程序开发数据缓存基础知识辨析及运用实例详解
Nov 06 #Javascript
nuxt 路由、过渡特效、中间件的实现代码
Nov 06 #Javascript
Nuxt的路由动画效果案例
Nov 06 #Javascript
微信小程序中target和currentTarget的区别小结
Nov 06 #Javascript
vue router-link 默认a标签去除下划线的实现
Nov 06 #Javascript
微信小程序调用后台service教程详解
Nov 06 #Javascript
Nuxt.js nuxt-link与router-link的区别说明
Nov 06 #Javascript
You might like
php xml-rpc远程调用
2008/12/19 PHP
php引用传值实例详解学习
2013/11/06 PHP
PHP如何通过AJAX方式实现登录功能
2015/11/23 PHP
laravel请求参数校验方法
2019/10/10 PHP
Thinkphp5框架异常处理操作实例分析
2020/06/03 PHP
js变量作用域及可访问性的探讨
2006/11/23 Javascript
解析javascript 浏览器关闭事件
2013/07/08 Javascript
JS实现的竖向折叠菜单代码
2015/10/21 Javascript
jQuery实现iframe父窗体和子窗体的相互调用
2016/06/17 Javascript
Centos7 中安装 Node.js v4.4.4
2016/11/03 Javascript
详解axios在vue中的简单配置与使用
2017/05/10 Javascript
基于Vue 2.0 监听文本框内容变化及ref的使用说明介绍
2018/08/24 Javascript
vue中动态添加class类名的方法
2018/09/05 Javascript
VueJS 组件参数名命名与组件属性转化问题
2018/12/03 Javascript
javascript实现前端成语点击验证优化
2020/06/24 Javascript
JavaScript实现动态生成表格
2020/08/02 Javascript
一行JavaScript代码如何实现瀑布流布局
2020/12/11 Javascript
[02:27]《DAC最前线》之附加赛征程
2015/01/29 DOTA
python在指定目录下查找gif文件的方法
2015/05/04 Python
Python编程之序列操作实例详解
2017/07/22 Python
详解Python中where()函数的用法
2018/03/27 Python
使用Python实现一个栈判断括号是否平衡
2018/08/23 Python
Python中作用域的深入讲解
2018/12/10 Python
Python中psutil的介绍与用法
2019/05/02 Python
python文件选择对话框的操作方法
2019/06/27 Python
Python秒算24点实现及原理详解
2019/07/29 Python
基于django传递数据到后端的例子
2019/08/16 Python
python数据化运营的重要意义
2019/11/25 Python
九月份红领巾广播稿
2014/01/22 职场文书
挂科检讨书范文
2014/02/20 职场文书
建筑工地门卫岗位职责
2014/04/30 职场文书
微笑面对生活演讲稿
2014/09/23 职场文书
2014年工作总结及2015工作计划
2014/12/12 职场文书
质检员岗位职责
2015/02/03 职场文书
三傻大闹宝莱坞观后感
2015/06/03 职场文书
python批量更改目录名/文件名的方法
2021/04/18 Python