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 相关文章推荐
深入理解JavaScript系列(9) 根本没有“JSON对象”这回事!
Jan 15 Javascript
JavaScript使用HTML5的window.postMessage实现跨域通信例子
Apr 11 Javascript
js限制文本框只能输入数字方法小结
Jun 16 Javascript
Node.js开启Https的实践详解
Oct 25 Javascript
jquery实现手机端单店铺购物车结算删除功能
Feb 22 Javascript
vue.js实现数据动态响应 Vue.set的简单应用
Jun 15 Javascript
ReactNative短信验证码倒计时控件的实现代码
Jul 20 Javascript
使用JavaScript实现表格编辑器(实例讲解)
Aug 02 Javascript
解决vue2中使用axios http请求出现的问题
Mar 05 Javascript
layui select 禁止点击的实现方法
Sep 05 Javascript
云服务器部署Node.js项目的方法步骤(小白系列)
Mar 23 Javascript
vue实现多个echarts根据屏幕大小变化而变化实例
Jul 19 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
Laravel使用swoole实现websocket主动消息推送的方法介绍
2019/10/20 PHP
JS 对象介绍
2010/01/20 Javascript
javascript跨域刷新实现代码
2011/01/01 Javascript
jquery中实现标签切换效果的代码
2011/03/01 Javascript
各浏览器中querySelector和querySelectorAll的实现差异分析
2012/05/23 Javascript
js鼠标滑过弹出层的定位IE6bug解决办法
2012/12/26 Javascript
使用JS或jQuery模拟鼠标点击a标签事件代码
2014/03/10 Javascript
深入分析javascript中console命令
2016/08/14 Javascript
详解vue-cli中的ESlint配置文件eslintrc.js
2017/09/25 Javascript
vue.js默认路由不加载linkActiveClass问题的解决方法
2017/12/11 Javascript
js删除数组中的元素delete和splice的区别详解
2018/02/03 Javascript
详解VueJs中的V-bind指令
2018/05/03 Javascript
opencv 识别微信登录验证滑动块位置
2018/08/07 Javascript
微信小程序日历组件使用方法详解
2018/12/29 Javascript
微信小程序template模板与component组件的区别和使用详解
2019/05/22 Javascript
layui table表格数据的新增,修改,删除,查询,双击获取行数据方式
2019/11/14 Javascript
Python 过滤字符串的技巧,map与itertools.imap
2008/09/06 Python
python查找第k小元素代码分享
2013/12/18 Python
使用Python &amp; Flask 实现RESTful Web API的实例
2017/09/19 Python
详解Python里使用正则表达式的ASCII模式
2017/11/02 Python
python协程之动态添加任务的方法
2019/02/19 Python
PythonWeb项目Django部署在Ubuntu18.04腾讯云主机上
2019/04/01 Python
python实现将一维列表转换为多维列表(numpy+reshape)
2019/11/29 Python
Python opencv相机标定实现原理及步骤详解
2020/04/09 Python
python 引用传递和值传递详解(实参,形参)
2020/06/05 Python
Python批量删除mysql中千万级大量数据的脚本分享
2020/12/03 Python
HTML5仿手机微信聊天界面
2016/03/18 HTML / CSS
使用HTML5的Canvas绘制曲线的简单方法
2015/09/08 HTML / CSS
美国Rue La La闪购网站:奢侈品、中高档品牌限时折扣
2016/10/19 全球购物
美国演唱会和体育门票购买网站:Ticketnetwork
2018/10/19 全球购物
家长通知书家长评语
2014/04/17 职场文书
2014年优质护理服务工作总结
2014/11/14 职场文书
巴黎圣母院读书笔记
2015/06/26 职场文书
办公室主任岗位竞聘书
2015/09/15 职场文书
永中文档在线转换预览基于nginx配置部署方案
2022/06/10 Servers
MySQL数据库配置信息查看与修改方法详解
2022/06/25 MySQL