nuxt 访问本地json数据

news/2024/7/10 3:15:09 标签: nuxt.config.js, nuxt, vue

最近使用Nuxt开发一个官网,暂时没有后端同学介入,但是又有一些重复的数据,因此自己写了个json文件。引用的时候便遇到了问题。

直接引用

//如果不怕麻烦,确实可以通过  ../   ../.../  ,但是想想就好,毕竟太喽了些
import teamJson from '../assets/json/team.json'

配置别名

通过配置nuxt.config.js>nuxt.config.js,不清楚的请移步这里

build: {
    /*
    ** You can extend webpack config here
    */
    extend(config, ctx) {
      // Run ESLint on save
      if (ctx.isDev && ctx.isClient) {
        config.module.rules.push()
      }
      config.resolve.alias['$json'] = path.resolve(__dirname, 'static/json')
      config.resolve.alias['$imgs'] = path.resolve(__dirname, 'static/img')
    }
 },

使用

import teamJson from '$json/team.json'
export default {
  data (){
    return {
      teamJson
    }
  }
}

http://www.niftyadmin.cn/n/1558200.html

相关文章

一只老鸟嵌入式工程师的血泪史!

作为一名在嵌入式行业摸爬滚打许久的老鸟,回想自己的经历之路,那么漫长可又仿佛近在眼前。随着学生的日益增多,偶尔之间,会想起自己曾经的一个经历。——此文仅献给那些刚刚踏上硬件之路和还在徘徊的同学们,在此我简要…

vue 事件委托

Vue 添加事件的方式很方便,在标签元素上以click“itemFn” 的形式填加就好,而且还有 .stop 、.prevent 、.self 等修饰符,简单好用。 但是如果li非常多呢?给列表上每个li都添加点击事件是不是不太好? li 添加click …

marquee 标签实现文字左右滚动

为什么80%的码农都做不了架构师&#xff1f;>>> <marquee id"mymarquee" οnmοuseοver"mymarquee.stop()" οnmοuseοut"mymarquee.start()" scrollAmount"5" scrollDelay"50" behavior"scroll"…

Vue 引入字体库

开发项目中&#xff0c;我们偶尔会遇到这么个问题&#xff0c;UI同学为了凸显某些标题或者文案&#xff0c;使用了特定的字体样式&#xff0c;那么前端如何去实现呢&#xff1f; 首页我们都会想到设置font-family&#xff0c;但是并没有什么用&#xff0c;那是因为我们没有引入…

Redis延迟监控框架

每个Redis实例经常被用于每时每刻都要提供大量查询服务的场景&#xff0c;同时&#xff0c;对平均响应时间和最大响应延迟的要求都非常严格。 当Redis用作内存系统时&#xff0c;它以不同的方式与操作系统进行交互&#xff0c;例如&#xff0c;持久化数据到磁盘上。再者&#x…

absolute 宽度自适应

absolute 应该是前端开发最常用的position定位属性值之一&#xff0c;对于它如何使用就不详细谈了&#xff0c;这里说一说使用 absolute固定定位后的width问题。 垂直上下居中 //html <div class"relative"><h6 class"absolute">我是张三&l…

欧拉回路与欧拉路径

欧拉回路与欧拉路径 如果图G中的一个路径包括每个边恰好一次&#xff0c;则该路径称为欧拉路径(欧拉通路)。 如果一个回路是欧拉路径&#xff0c;则称为欧拉回路(Euler circuit)。 说的直白点&#xff0c;欧拉回路就是从一个点出发&#xff0c;经过每一条边恰好一次&#xff0c…

css 实现跑马灯效果

最近有一个跑马灯的效果&#xff0c;需要实现。本来想偷个懒从网上随便拷贝一个&#xff0c;结果发现都不太理想&#xff0c;于是自己动手封装了一个&#xff0c;和大家分享一下。 首先我们要知道跑马灯的具体效果是什么样子的。 效果图 我们通过效果图可以看到&#xff0c;在…