Nuxt.js
椰卤工程师
这个作者很懒,什么都没留下…
展开
-
Nuxt.js 异步获取api接口数据
nuxt.config.jsmodules: [ // Doc: https://axios.nuxtjs.org/usage // '@nuxtjs/axios', // '@nuxtjs/proxy', '@nuxtjs/axios' ]index.vue<template> <div class="sp-policy"> <div>{{ Title }}</div> <div v-ht原创 2020-08-25 16:40:42 · 1301 阅读 · 0 评论 -
踩坑:为什么 Nuxt.js 应用会出现重复的 Meta 标签?
为了避免子组件中的meta标签不能正确覆盖父组件中相同的标签而产生重复的现象,建议利用 hid 键为meta标签配一个唯一的标识编号。拿下面的例子来说,对于描述 meta 标签, 我们给 hid 属性设定一个唯一的标识值为:description, 当有组件定义了相同 hid 的 meta 标签时, vue-meta 将知道覆盖父级的配置。在应用配置文件 nuxt.config.js 中配置默认 meta:...head: { title: 'starter', meta: [原创 2020-05-22 14:35:02 · 872 阅读 · 1 评论 -
关于Nuxt.js部署和配置,那些你闭着眼睛都要会写的步骤
如何使用外部资源?1、全局配置这样写,在 nuxt.config.js 中配置你想引用的资源文件:module.exports = { head: { script: [ { src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js' } ], link: [ { rel: 'stylesheet', href: 'https://fonts.googleapis.c原创 2020-05-13 15:40:20 · 2056 阅读 · 0 评论 -
踩坑:为什么 Nuxt.js 应用的页面会出现闪烁呢?
这是因为在开发模式下,为了通过 Webpack 实现热加载,CSS代码是打包在 JavaScript 代码中,并动态打到页面中去,从而元素重绘引起了闪烁。不用担心,在生产模式下,CSS代码会单独打包至独立的文件并置于head标签内,不会出现页面闪烁的现象。我们只需要添加一个条件,只在生产模式下打包即可,nuxt.config.js下:extractCSS: process.env.NODE_ENV === 'production',...原创 2020-05-13 10:59:43 · 3459 阅读 · 0 评论 -
Nuxt.js将css提取到link后,刷新加载时会闪屏?可能是你用的方式不对
nuxt.js关于如何从页面中将css提取到link,大家百度、谷歌后会发现关于nuxt.js的文章并不多,解决方法基本都是:在nuxt.config.js下的build里添加 extractCSS: { allChunks: true } 这句话,如下图有的同学会发现,npm run dev 后没有任何变化,不要着急,试下npm run build 再 npm start,就会成功了。当然这个方法简单粗暴,同时也会带来一个小问题———在刷新加载css时,页面会出现闪烁,然后才会出现渲染好的页面。原创 2020-05-11 14:36:41 · 2775 阅读 · 4 评论