分类：Nuxt

2020
11-06

解决nuxt 自定义全局方法,全局属性,全局变量的问题

注意，这个在asyncData还是不能用的，在mounted等其他生命周期里面可以，asyncData里因为获取不到this他在组件初始化前执行的，如果找到方法我会继续更新到下一篇博客好现在说步骤，在plugins文件夹里新增一个commom.js名字你自己取commom.js测试代码importVuefrom'vue'varcomsys={install(Vue){Vue.prototype.comsys={val:function(val){returnval}};}}Vue.use(comsys);nuxt.co... 继续阅读 >
2020
11-06

nuxt 自定义 auth 中间件实现令牌的持久化操作

核心点就是在process.server下，把之前存在cookie中的数据再用store.commit一下auth.js/*eslint-disableno-unused-vars*//*eslint-disableno-useless-return*/exportconstTokenKey='Admin-token'/***解析服务端拿到的cookie*@param{*}cookie*@param{*}key*/exportfunctiongetCookie(cookie,key){if(!cookie)returnconstarrstr=cookie.split(';')for(leti=0;i<arrstr.length;i++){co... 继续阅读 >
2020
10-08

Nuxt配置Element-UI按需引入的操作方法

Nuxt使用create-nuxt-app创建项目时，选择使用Element-UI为默认组件库，发现Nuxt没有开启Element-UI的按需引入配置，需要自行配置。安装依赖在create-nuxt-app中没有选择Element-UI的先安装。npminstallelement-ui--save或者yarnaddelement-uiElement-UI开启按需引入，必须安装babel-plugin-component插件。npminstallbabel-plugin-component--save-dev或者yarnaddbabel-plugin-component安装完成后，在... 继续阅读 >
2020
10-08

解决Nuxt使用axios跨域问题

Nuxt是Vue项目服务器端渲染（SSR)解决方案。而在使用时，就会遇到前后端分离情况下的域名或端口不一致导致的跨域问题。本文将介绍如何通过设置代理解决Nuxt与axios集成的跨域问题。解决跨域Nuxt使用axios为避免出现前端页面跨域问题，需要安装@nuxtjs/axios和@nuxtjs/proxy两个模块。用yarn安装：yarnaddaxios@nuxtjs/axios@nuxtjs/proxy使用npm安装：npminstallaxios@nuxtjs/axios@nuxtjs/proxy注意：... 继续阅读 >
2020
09-28

Nuxt默认模板、默认布局和自定义错误页面的实现

一、默认模板和默认布局通常用于一些有固定格式的网站比如一些网站的头部和底部都是一样的此时即可使用默认模板默认模板在项目的根目录下创建一个名为app.html的文件Nuxt即可自动将其识别为默认模板：用法和字符串拼接有点类似可将{{HEAD}}视为头部内容将{{APP}}视为页面主体内容(HEAD和APP都需大写)<!DOCTYPEhtml><htmllang="en"><head>{{HEAD}}</head><body><p>测试1</p>{{APP}}<p>测试2</p></body></html>重启服... 继续阅读 >
2020
09-27

nuxt+axios实现打包后动态修改请求地址的方法

需求：把请求地址等一些配置暴露出来以便打包后动态修改，而不需要重新打包编译。这样也是挺不错的，当一个项目需要部署到几个不同的服务器上时候，就不用说每次都要修改后再重新打包。功能不变时，单单是修改一下请求地址省了不少功夫。1.开始把需要动态修改的配置写在一个配置json文件里面。该配置文件可以放在static目录下：静态文件目录：静态文件目录static用于存放应用的静态文件，此类文件不会被Nuxt.js调用Webpack进... 继续阅读 >
2020
09-27

详解Nuxt内导航栏的两种实现方式

详解Nuxt内导航栏的两种实现方式 方式一|通过嵌套路由实现在pages页面根据nuxt的路由规则，建立页面1.创建文件目录及文件根据规则，如果要创建子路由，子路由的文件夹名字，必须和父路由名字相同所以，我们的文件夹也为index，index文件夹需要一个默认的页面不然nuxt的路由规则就不能正确匹配页面一级路由是根路由二级路由是index，user，默认进入index路由下面是router页面自动生成的路由{path:"/",component:_93624e48,children:[{path:"",c... 继续阅读 >
2020
09-24

Nuxt页面级缓存的实现

Nuxt页面级缓存的实现 虽然Vue的服务器端渲染(SSR)相当快速，但是由于需要为每次请求为了避免交叉请求状态污染，都创建一个新的根Vue实例，创建组件实例和虚拟DOM节点的开销，无法与纯基于字符串拼接的模板的性能相当。在SSR性能至关重要的情况下，明智地利用缓存策略，可以极大改善响应时间并减少服务器负载。同时还可以大大减少后端接口服务器的负载。在vueSSR指南中，缓存有两种，分为页面级缓存和组件级缓存。本次讲的是页面缓存，如果内... 继续阅读 >