Nuxt.js
喜樂的CC
劝你学后端
展开
-
Nuxt.js配置BASE_URL 开发与生产环境对应相应的接口地址
第一步: 检查包检查package.json文件是否有 cross-env 这个包,没有的话执行下面命令;npm install cross-env -save简写: npm i cross-env -S*cross-env --跨平台设置及使用环境变量包 第二步: 修改配置package.json文件修改配置(baseUrl=测试域名或正式域名)"scr...原创 2019-01-24 15:01:14 · 11491 阅读 · 3 评论 -
Nuxt.js性能优化之图片加载
方法:小图片放在assets文件夹中会通过webpack使用file-loader和url-loader处理转换成base64;***切记:大图片会适得其反!!!原创 2019-02-20 16:27:19 · 6196 阅读 · 0 评论 -
Nuxt.js之pages页面引用组件中css样式加载速度会慢html一步的解决办法
模块以组件方式在页面呈现,在本地运行npm run dev没有任何问题,但是上线之后,会发现页面先是加载html样式,再加载css样式,这样就造成了第一屏效果不好;解决办法:组件不要在pages页面中引入,而是在layouts布局中引用(布局详情到nuxt官网看看);原理是因为nuxt有布局概念,页面首屏渲染呈现是布局,所以html和css都会第一时间出现.正确引入示例图:拓展:...原创 2019-02-27 16:36:01 · 5414 阅读 · 4 评论 -
Nuxt.js之一个页面把全部css样式都加载进来的Bug解决办法
逐一排查是安装包出了问题,npm i 和cnpm i不能通用;解决办法:node_modules文件删除,重新安装.如果没安装镜像就用npm i;安装了镜像就用cnpm i ;具体原理暂不清楚,有知晓的务必留言或私信我感激不尽;...原创 2019-02-27 16:25:26 · 5713 阅读 · 3 评论 -
Nuxt.js部署到CDN服务器报错
write EPROTO 101057795:error:14077410:SSL routines:SSL23_GET_SERVER_HELLO:sslv3 alert handshake failure:openssl\ssl\s23_clnt.c:802: unable to verify the first certificate ↓↓↓----------...原创 2019-01-23 10:52:40 · 3122 阅读 · 0 评论 -
项目部分改造成vue/nuxt的页面与未改造的页面共存的方法
需求:项目是JQuery做成的网站,后来为了迎合seo需求,首页需要修改成vue的ssr即服务端渲染,其他页面因为时间关系只能先不修改,但是上线新的首页后,其他页面访问不了.便写下解决过程以此记录与分享.解决办法一:未改造的页面放在vue的static这个文件夹中即可.**因为我的vue项目里面不存在其他页面,即vue项目里面只有一个首页页面index.vue,所以项目部署vu...原创 2019-01-16 16:48:27 · 1699 阅读 · 0 评论 -
Nuxt.js部署服务器会缓存 让pm2监控并自动重启项目
步骤一: 监控项目文件首先Nuxt.js项目的入口文件是packge.json,项目名是ssrqiu006,也就是PM2需要监控用到的项目名 pm2 start npm --name "ssrqiu006" -- run build --watch步骤二: 修改版本号当你的项目重新打包上传文件时,网站的内容还是旧的,这时候就需要更改packge.json的版本号...原创 2019-01-16 12:00:30 · 4224 阅读 · 0 评论 -
NuxtServerError:Request failed with status code 500 我的解决办法与思路
目录一.问题来源二.解决思路三.解决办法四.总结一.问题来源平时使用nuxt和部署上线都是正常运行的,偶尔有一天报500的错误;Nuxt.js运行(npm run dev)报错如下:服务器错误日志如下:0|qiu | ERROR Request failed with status code 500 ...原创 2019-01-26 20:37:50 · 180232 阅读 · 15 评论 -
关于nuxt.js打印
当methods:{}中的一个函数声明打印命令,命令是输出数字1:methods:{ abc(){ console.log(1) }} 如果这个方法在create钩子中调用,则会在命令行和控制台中都会打印数字1:created:function(){ this.abc();}, 如果在mounted钩子中调用,则只会在...原创 2018-12-24 21:10:27 · 2957 阅读 · 0 评论 -
Nuxt.js 使用scss(sass)的方法
一: 安装需要用到的loadernpm install --save-dev node-sass sass-loader官方文档传送门: css配置 二: 页面调用(注意不要漏了lang="scss",不是sass)<style lang="scss">//注意!这里很关键,很多配置成了不编译就是漏了lang="scss" @import '../ass...原创 2018-12-21 21:11:56 · 11117 阅读 · 1 评论 -
Nuxt.js报错:The client-side rendered virtual DOM tree is not matching server-rendered content的两种情况解决办法
目录第一种情况: 页面出现瞬间又消失不见第二种情况: 页面正常加载,有几率刷新mounted方法加载两次,导致页面内容重复渲染;The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML mar...原创 2019-01-15 17:54:20 · 37012 阅读 · 9 评论