时间:2021-05-26
需要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 代理 如下图:
方便你复制~~~~
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:// NODE_ENV=production千万别直接复制我上面的这段代码哦,因为每个项目的BASE_URL一般都是不一样的,你要换成自己项目的接口请求域名
第三步:配置nuxt.config.js
package.json中的scripts配置完成之后,还要去nuxt.config.js配置一下env,官方文档
// nuxt.config.jsmodule.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
或者你在任意页面console.log(process.env.BASE_URL)都是可以打印得出来的
从此以后,只需要执行不同的打包命令就可以自动设置BASE_URL和NODE_ENV了,告别频繁的注释和取消注释,潇洒的删除你的if...else...设置baseUrl的文件吧!
以上这篇nuxt.js服务端渲染中axios和proxy代理的配置操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
Nuxt.js是一个基于Vue.js的通用应用框架。通过对客户端/服务端基础架构的抽象组织,Nuxt.js主要关注的是应用的UI渲染。SSR,即服务器渲染,就是
Nuxt.js提供了两种发布部署应用的方式:服务端渲染应用部署和静态应用部署。静态应用部署就不说了,主要说说服务端渲染应用部署。官方推荐部署方式关于服务端渲染应
为什么要用Nuxt.js公司现有的项目只有落地页是通过前端本身server读取pug文件进行服务端渲染的,当然是为了首屏加载速度以及SEO。Nuxt.js是一个
Nuxt.js是一个建立在Vue.js基础上的服务端渲染框架。它非常易于上手并且可以让你在几分钟内构建你的应用。服务端渲染是一个解决所有SPA的SEO问题的伟大
Nuxt.js是Vue进行SSR的一个优选开源项目,可免去繁琐的Webpack、nodejs后台服务配置等操作,方便的搭建一个支持SSR的VUE项目。Eleme