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 相关文章推荐
基于JQuery.timer插件实现一个计时器
Apr 25 Javascript
JQuery 学习技巧总结
May 21 Javascript
PHP使用方法重载实现动态创建属性的get和set方法
Nov 17 Javascript
jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)
Dec 31 Javascript
javascript中this指向详解
Apr 23 Javascript
第一次接触神奇的Bootstrap菜单和导航
Aug 01 Javascript
js中document.referrer实现移动端返回上一页
Feb 22 Javascript
JS扩展String.prototype.format字符串拼接的功能
Mar 09 Javascript
记录一次开发微信网页分享的步骤
May 07 Javascript
element ui分页多选,翻页记忆的实例
Sep 03 Javascript
JavaScript 禁止用户保存图片的实现代码
Apr 28 Javascript
Vue实现点击当前行变色
Dec 14 Vue.js
微信小程序开发数据缓存基础知识辨析及运用实例详解
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
phpmyadmin的#1251问题
2006/11/25 PHP
php Rename 更改文件、文件夹名称
2011/05/24 PHP
仿dedecms下拉分页样式修改的thinkphp分页类实例
2014/10/30 PHP
php查询mssql出现乱码的解决方法
2014/12/29 PHP
PHP 微信扫码支付源代码(推荐)
2016/11/03 PHP
Yii框架实现记录日志到自定义文件的方法
2017/05/23 PHP
关于laravel后台模板laravel-admin select框的使用详解
2019/10/03 PHP
2007/12/23更新创意无限,简单实用(javascript log)
2007/12/24 Javascript
借用Google的Javascript API Loader来加速你的网站
2009/01/28 Javascript
将文本输入框内容加入表中的js代码
2013/08/18 Javascript
js禁止页面刷新禁止用F5键刷新禁止右键的示例代码
2013/09/23 Javascript
学习使用grunt来打包JavaScript和CSS程序的教程
2016/01/04 Javascript
深入浅析JavaScript中的3DES
2016/08/24 Javascript
vue.js 表格分页ajax 异步加载数据
2016/10/18 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(同步显示图像位置信息)
2016/12/02 Javascript
jQuery使用正则验证15/18身份证的方法示例
2017/04/27 jQuery
Vee-Validate的使用方法详解
2017/09/22 Javascript
极简主义法编写JavaScript类
2017/11/02 Javascript
如何使用puppet替换文件中的string
2018/12/06 Javascript
[28:07]完美世界DOTA2联赛PWL S3 Phoenix vs INK ICE 第二场 12.13
2020/12/17 DOTA
巧用python和libnmapd,提取Nmap扫描结果
2016/08/23 Python
Pycharm及python安装详细教程(图解)
2020/07/31 Python
如何快速理解python的垃圾回收机制
2020/09/01 Python
Python加载数据的5种不同方式(收藏)
2020/11/13 Python
经典大学生求职信范文
2014/01/06 职场文书
城建学院毕业生自荐信
2014/01/31 职场文书
小学毕业感言150字
2014/02/05 职场文书
《画家乡》教学反思
2014/04/22 职场文书
《美丽的南沙群岛》教学反思
2014/04/27 职场文书
军训拉歌口号
2014/06/13 职场文书
基层党员群众路线教育实践活动个人对照检查材料思想汇报
2014/10/05 职场文书
小学班主任教育随笔
2015/08/15 职场文书
小学数学国培研修日志
2015/11/13 职场文书
创业的9条正确思考方式
2019/08/26 职场文书
python中redis包操作数据库的教程
2022/04/19 Python
MySQL外键约束(Foreign Key)案例详解
2022/06/28 MySQL