分类：nuxt.js

2020
11-06

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

需要npmaxios？刚开始，我以为需要像普通的vueSPA开发那样，需要npmaxios，这种方式的确可以生效。但在使用时并不方便。尤其是设置代理比较麻烦，而且在asyncData里与在普通methods里使用方式不一样。后来在nuxt的github上发现了nuxt是默认集成了axios的，所以不需要npmaxios，但是需要进行适当的配置。以上是百度到的，发现老是报错，现在网上的教程完全是在扯淡，npmaxios是不需要安装了，但是@nuxtjs/axios要安装啊第一... 继续阅读 >

2020
11-06

Nuxt.js nuxt-link与router-link的区别说明

前言在使用Nuxt.js时可能会遇到一个这样的问题？当打开请求页面的时候，所有页面都被请求了。这正是<router-link>组件所有的特性。首先说一下router-linkrouter-link<router-link>是使vue项目具有路由功能的应用点击组件。nuxt-link先看一下官方api介绍<nuxt-link>正如官方所说<nuxt-link>使用方式和用途<router-link>是一致的。但，后面说将来我们会为<nuxt-link>组件增加更多的功能特性，例如资源预加载，用于提升nuxt.js应用... 继续阅读 >

2020
11-06

Nuxt.js的路由跳转操作(页面跳转nuxt-link)

路由跳转代码如下：<ul><li><nuxt-link:to="{name:'index.vue'}">HOMEpage</nuxt-link></li><li><nuxt-link:to="{name:'new-new'}">NEWSpage</nuxt-link></li><li><nuxt-link:to="{name:'plays-play'}">PLAYpage</nuxt-link></li></ul>注意说明：to前面有冒号“:”to后面跟的是路径比如“/page/index”(可以跟字符串或对象)同上↑补充知识：nuxt的nuxt-link有个坑如果你跟着nuxt的案例走，记住，所以目录比如PAG... 继续阅读 >

2020
11-06

nuxt.js 在middleware(中间件)中实现路由鉴权操作

路由鉴权：就是判断这个路由当前浏览者是否需要权限访问。一般我是通过判断cookie中存储的token来判断的。在middleware文件夹下新建“auth.js”的文件在当前auth.js文件内判断cookie中是否包含token字段importgetCookiefrom'~/utils/getCookie'exportdefaultfunction({route,req,res,redirect}){letisClient=process.client;letisServer=process.server;letredirectURL='/sign';vartoken,path;//在服... 继续阅读 >

2020
11-06

nuxt.js添加环境变量,区分项目打包环境操作

最近由于业务需求，开发了一个nuxt.js项目。配置打包环境变量时，发现nuxt.js的文档过于简单，无法做参照。经查证了一些资料后，解决了该问题。遂整理成文档，发布于此，给同行一些参照。一、添加cross-env插件npmnpmicross-envyarnyarnaddcross-env二、添加环境变量文件根目录添加env.productionNODE_ENV='production'VUE_APP_TITLE='production'根目录添加env.test文件NODE_ENV='production'VUE_APP_TITLE='test'三... 继续阅读 >

2020
11-06

Nuxt.js 静态资源和打包的操作

直接引入图片我们在网上任意下载一个图片，放到项目中的static文件夹下面，然后可以使用下面的引入方法进行引用。<div<imgsrc="~static/logo.png"></div>这时候在npmrundev下是完全正常的，那我们看一下打包。打包静态HTML并运行用Nuxt.js制作完成后，你可以打包成静态文件并放在服务器上，进行运行。在终端中输入：npmrungenerate然后在dist文件夹下输入live-server就可以了。总结：Nuxt.js框架非常简单，因为大部分的事情... 继续阅读 >

2020
11-06

nuxt.js写项目时增加错误提示页面操作

为项目增加错误提示页面，比如后端接口没有数据或接口报错的时候，如果不增加错误提示页面的话，那接口报错的信息就会在页面中显示，这显然不利于用户体验。实际操作过程中，可能因为各种原因无法显示正确的返回页面，比如本身这篇文章的id不存在，或者网络请求问题，这时候就需要一个错误展示页用来提示用户；nuxt.js官方也有错误提示页面的写法：传送门->官方错误提示页面的写法此项目中的错误提示页面是放在layouts目录中：lay... 继续阅读 >