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 相关文章推荐
【消息提示组件】,兼容IE6/7&amp;&amp;FF2
Sep 04 Javascript
javascript获得网页窗口实际大小的示例代码
Sep 21 Javascript
原生js配合cookie制作保存路径的拖拽
Dec 29 Javascript
基于Javascript实现弹出页面效果
Jan 01 Javascript
AngularJS在IE8的不支持的解决方法
May 13 Javascript
JavaScript自定义分页样式
Jan 17 Javascript
通过npm引用的vue组件使用详解
Mar 02 Javascript
在小程序中使用Echart图表的示例代码
Aug 02 Javascript
JS判断数组里是否有重复元素的方法小结
May 21 Javascript
vue keep-alive列表页缓存 详情页返回上一页不刷新,定位到之前位置
Nov 26 Javascript
JS 事件机制完整示例分析
Jan 15 Javascript
小程序实现左滑删除的效果的实例代码
Oct 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
php和javascript之间变量的传递实现代码
2012/12/19 PHP
php实现utf-8和GB2312编码相互转换函数代码
2013/02/07 PHP
php操作MongoDB基础教程(连接、新增、修改、删除、查询)
2014/03/25 PHP
php+ajax实现无刷新动态加载数据技术
2015/04/28 PHP
PHP入门教程之表单与验证实例详解
2016/09/11 PHP
PHPStorm 2020.1 调试 Nodejs的多种方法详解
2020/09/17 NodeJs
jQuery实现移动端滑块拖动选择数字效果
2015/12/24 Javascript
jquery+json实现分页效果
2016/03/07 Javascript
关于cookie的初识和运用(js和jq)
2016/04/07 Javascript
jQuery+ajax实现实用的点赞插件代码
2016/07/06 Javascript
JavaScript原型继承_动力节点Java学院整理
2017/06/30 Javascript
详解tween.js 中文使用指南
2018/01/05 Javascript
angular实现页面打印局部功能的思考与方法
2018/04/13 Javascript
浅谈vue加载优化策略
2019/03/19 Javascript
详解JS实现系统登录页的登录和验证
2019/04/29 Javascript
js对象数组和对象的使用实例详解
2019/08/27 Javascript
layui checkbox默认选中,获取选中值,清空所有选中项的例子
2019/09/02 Javascript
微信小程序使用echarts获取数据并生成折线图
2019/10/16 Javascript
Python2.7下安装Scrapy框架步骤教程
2017/12/22 Python
每天迁移MySQL历史数据到历史库Python脚本
2018/04/13 Python
pandas DataFrame索引行列的实现
2019/06/04 Python
使用PyTorch训练一个图像分类器实例
2020/01/08 Python
基于Tensorflow批量数据的输入实现方式
2020/02/05 Python
Django通过json格式收集主机信息
2020/05/29 Python
找到不普通的东西:Bonanza
2016/10/20 全球购物
Mankind西班牙男士护肤品网站:购买皮肤护理、护发和剃须
2017/04/27 全球购物
SQL语言面试题
2013/08/27 面试题
留学生如何写好自荐信
2013/12/27 职场文书
幼儿园教研活动方案
2014/01/19 职场文书
影视广告专业求职信
2014/09/02 职场文书
2014银行授权委托书样本
2014/10/04 职场文书
群众路线教育实践活动心得体会(教师)
2014/10/31 职场文书
优秀教师先进材料
2014/12/16 职场文书
行政处罚听证告知书
2015/07/01 职场文书
同学联谊会邀请函
2019/06/24 职场文书
2019优秀干部竞聘演讲稿范文!
2019/07/02 职场文书