• 前端分享学习博客,探究前端相关技术,推动天朝前端发展,有任何问题都可以留言一起探究
  • 由于站内自链接问题,部分pre中的代码首字母使用大写以过滤筛选
  • 欢迎友链互换,还有,如果有大神请不要黑我的站点(o´・ェ・`o)
  • 如果你觉得博客还不错,请Ctrl+D收藏( *︾▽︾)

Nuxt.js踩坑集

Frame/Browser 薛 陈磊 1673次浏览 2个评论 扫描二维码

Nuxt.js 是一个基于 Vue.js 的通用应用框架。通过对客户端/服务端基础架构的抽象组织,Nuxt.js 主要关注的是应用的 UI渲染;集成了webapck和vue-mate等,可用于解决传统SPA页面渲染中的SEO问题;

Nuxt.js 官网:https://nuxtjs.org

Nuxt.j实例基础配置:https://github.com/XiaoNode/nuxt-cli

收集及解决的一些问题,排名不分先后;

1.Nuxt.js package.json script 命令释义

nuxt : 开启一个监听3000端口的服务器,同时提供hot-reloading功能(端口可配置)
nuxt build : 构建整个应用,压缩合并JS和CSS文件(用于生产环境)
nuxt start : 开启一个生产模式的服务器(必须先运行nuxt build命令)
nuxt generate: 构建整个应用,并为每一个路由生成一个静态页面(用于静态服务器)

2.Nuxt.js  默认全家桶组件等引用问题

全家桶示例引用为“import Logo from ~components/Logo.vue”,但是后期陆续npm install加上其他loader后这里可能会报错,需要改成“import Logo from ~/components/Logo.vue”;

3.修改默认端口

package.json中添加:

"config": {
    "nuxt": {
        "host": "127.0.0.1",
        "port": "7788"
    }
}

4. *.vue中引用css/scss全局污染

在vue文件中,可以这样引用样式,或者在style标签中直接写样式

<style scoped> 
    @import '~assets/css/a.css';

    .a{ color:red }
</style>

 

加上scoped后书写的样式只在这个vue中有效,但是import引用的不会,会缓存到页面中影响其他dom,可以这样写:

<style scoped src="../../assets/a.css"></style>

5.nuxt.config.js中引用本地文件

issues: https://github.com/nuxt/nuxt.js/issues/1309

如上所述,nuxt.config.js中引用CDN资源很方便,但是引用本地资源一直报错,可能是我操作不当,问题还未解决;

6.middleware参数‘redirect’错误

issues: https://github.com/nuxt/example-auth0/issues/17

middleware设置跳转条件,无法跳转,本大王很囧…
已经解决,在nuxt.js project中的middleware中

export default function( context ) {
	context.userAgent = context.isServer ? context.req.headers['user-agent'] : navigator.userAgent;
}

context实际上是所有参数的集合,所以参数如果写成{ context, redirect }是会报错的…

Nuxt.js踩坑集

middleware执行顺序: nuxt.config.js => 匹配布局 => 匹配页面

7.dev与prod时,无法使用window.location获取当前地址和端口

const isProdMode = Object.is(process.env.NODE_ENV, 'production')

var baseUrls = null;
isProdMode ? baseUrls="http://d.com:12190/" : baseUrls='http://d.com:12170/';

export default baseUrls;

这个问题不限定在Nuxt.js中,vue-cli也有这个问题应该;

项目本地运行与发布的时候,API请求的地址是不同的(大部分情况下是如此),可以根据NODE_ENV来给baseurl,但是这里不能使用window.location来获取当前地址或端口,也就是baseUrl= window.location.host会出错;

估计问题在node生成环境的问题,并非像普通js那样运行在浏览器可以直接location,npm run build的时候是node环境生成,没有window全局变量,使用无法获得运行地址,囧了…

妥协一步,这里前端无法自动判定地址和端口的话,只能使用运维或手动修改了…

貌似真没人这么操作过,情况也应该是如上所说,最后…我把prod模式的baseurl设置为空…根据当前自动请求接口…我也是服了…hhh


薛陈磊的博客 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明Nuxt.js踩坑集
喜欢 (0)
[905044086@qq.com]
分享 (0)
作者薛陈磊
关于作者:
非著名前端Coder,中二非文艺闷骚少年,喜欢动漫、历史、暗荣三国志和游山玩水,关注互联网发展,期待遇到更多小伙伴一起吹水玩耍;
说点什么...
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(2)个小伙伴在吐槽
  1. 感谢博主分享的知识点
    剪板机2017-08-16 09:09 回复 Windows 7 | Maxthon 4.4.8.1000
  2. 感受学习的力量!
    笑八达2017-08-14 06:36 回复 Windows 7 | 搜狗浏览器 2.X