vue 如何引入本地某个文件 require

目录
  • vue 引入本地某个文件 require
    • 1.使用require.context判断某个文件是否存在
    • 2.使用 try……catch……
  • vue 引入本地文件无效
    • 解决方法

vue 引入本地某个文件 require

vue 使用require引入某个文件，判断本地是否有某个文件

在本地电脑有host.json文件，在项目中引入这个文件

1.使用require.context判断某个文件是否存在

require.context(引入某个文件的路径， 是否遍历该路径下的所有子目录，正则匹配后缀名称)

let obj = require.context(
      "/Users/Administrator/test-demo",
      false,
      /\host\.json$/
);  // 检索符合是 host.json 后缀的所有文件
let host = obj.keys().filter(it => it === "./host.json"); // 过滤host.json完全匹配文件
if (host && host.length) {
      let hostname = require("/Users/Administrator/test-demo/host.json");
      console.log(hostname);
}

obj.keys()返回所有符合后缀是 host.json 的文件名数组，并每个项都是以路径的形式显示，所以在文件的前面有./

 obj.keys() = ["./1host.json", "./host.json"]

我需要的是完全匹配 host.json 文件，所以使用数组过滤函数filter过滤host.json文件，如果存在文件则使用require去读取文件内的数据

如果检索不到host.json后缀的文件，obj.keys()返回一个空数组

2.使用 try……catch……

try {
      let hostname = require("/Users/Administrator/test-demo/host.json");
      console.log(hostname);
    } catch (error) {
      console.log(1111);
    }

如果检索不到host.json后缀的文件，进入catch内，如果有安装eslint,会有警告信息，对强迫症者不友好。如果不介意，肯定是这个方法好，代码少

vue 引入本地文件无效

无效的原因是，在webpack打包的设置(/config/index.js)中，指定将静态资源打包到static文件夹下，从而导致路径错误。

解决方法

将静态资源放在static文件夹下再引入

– 打包之前

– 打包之后

或者在引入时默认静态资源在static文件夹下

我在根目录下建立了css文件夹用来装样式文件

但是在引入的时候，我认为他已经在static文件夹下了（因为运行时它会被安排在那里）

你看，它还在提示，找不到bootstrap.css，因为它现在确实不在static下，但是当运行时(打包后不行，因为webpack会重新组织文件，导致引入失败)，它会出现在那里(怎么证明：1.样式生效了 2. 访问http://localhost:8080/static/css/bootstrap.css得到了正确的样式)。

– 打包后，文件被重新组织，已经看不到bootstrap.css了

当然是推荐使用第一种啦，直接将静态文件放在static下，举第二个例子是为了更清楚的理解位置变化

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue3+TypeScript+Vite使用require动态引入图片等静态资源

    Vue3+TypeScript+Vite使用require动态引入图片等静态资源

    问题:Vue3+TypeScript+Vite的项目中如何使用require动态引入类似于图片等静态资源! 描述:今天在开发项目时(项目框架为Vue3+TypeScript+Vite)需要 动态引入静态资源,也就是img标签的src属性值为动态获取,按照以往的做法直接是require引入即可,如下代码: <img class="demo" :src="require(`../../../assets/image/${item.img}`)" /> 写上后

  • v-for循环中使用require/import关键字引入本地图片的几种方式

    v-for循环中使用require/import关键字引入本地图片的几种方式

    目录 问题描述 方式一(后端返回图片URL) 方式二(前端使用require) 方式三(前端使用import) 总结 问题描述 我们做项目中,常常需要把图片呈现到页面上,一般来说有以下几种方式 方式一(后端返回图片URL) 这种方式就是后端返回图片的url地址,我们直接img标签的src属性绑定imgUrl即可.如下代码: <div class="item" v-for="(item, index) in apiArr" :key="index&qu

  • vue项目中使用require.context引入组件

    vue项目中使用require.context引入组件

    目录 背景 require.context 是什么? require.context 的基本用法 require.content 的应用场景 背景 我们在vue项目中,我们可能或有很多的组件需要全局注册,大家有没有遇到这样的烦恼,组件太多,需要一个一个引入注册呢? require.context 是什么? require.context 是webpack的api,我们可以通过require.context()函数来创建自己的context. require.context 的基本用法 语法如下

  • vue的图片需要用require的方式进行引入问题

    目录 图片用require方式进行引入 require引入的图片和直接引入的图片有啥区别 图片用require方式进行引入 在vue中,我们有时候通过动态的方式加载图片,需要require的方式进行引入图片. html <image :src="rightIcon" mode=""></image>            //图片 <view class="tab"  :style="tabSrc"

  • vue 如何引入本地某个文件 require

    vue 如何引入本地某个文件 require

    目录 vue 引入本地某个文件 require 1.使用require.context判断某个文件是否存在 2.使用 try……catch…… vue 引入本地文件无效 解决方法 vue 引入本地某个文件 require vue 使用require引入某个文件,判断本地是否有某个文件 在本地电脑有host.json文件,在项目中引入这个文件 1.使用require.context判断某个文件是否存在 require.context(引入某个文件的路径, 是否遍历该路径下的所有子目录,正则匹配后缀

  • vue data引入本地图片的两种方式小结

    我就废话不多说了,大家直接看吧! 第一种 <template> <img :src="imgsrc"> </template> <script> export default { data () { return { imgsrc: require('../../images/ICON-electronicbilling.png') } } } </script> 第二种 <template> <img :s

  • 在vue中读取本地Json文件的方法

    其实关于这个问题,网上已经可以找到些方法,不过基本上没有完整的,或者是其中有些坑,下面写一下自己的亲身实践. 使用vue读取本地json文件需要安装vue-resource插件,然后使用它的$http.get来读取json文件. json文件应该是必须放在static目录下 然后使用npm install 命令安装vue-resource,太慢的话就使用淘宝镜像安装,安装完成后先引用这个组件. 在main.js文件中添加: import VueResource from 'vue-resourc

  • vue实现引入本地json的方法分析

    本文实例讲述了vue实现引入本地json的方法.分享给大家供大家参考,具体如下: 当前需要使用的组件: import data from './test.json' export default{ data(){ return{ userinform: '' } }, mounted(){ this.userinform = data } } test.json就是普通json格式就可以了!然后完美解决! 后台服务器请求json方式: this.$http.get('url').then(res

  • Vue中请求本地JSON文件并返回数据的方法实例

    Vue中请求本地JSON文件并返回数据的方法实例

    目录 1.目录结构 2.检查一下自己是否安装了 json-server(以下截图代表安装了) 3.安装完成以后我们就可以运行自己的json文件了 4.看看浏览器里的数据呈现效果吧 5.为了保险起见,我还特地去 postman 上测试了一下(可以省略这步) 6.现在我们可以编写代码发送请求来获取数据啦 7.在控制台就可以看到我们数据请求回来了 总结 1.目录结构 直接在根目录下创建自己的JSON文件,在此我的JSON文件名为data.json 以下是我的JSON文件内容(此处是参照的黑马程序员的v

  • vue中引入第三方字体文件的方法示例

    vue中引入第三方字体文件的方法示例

    在用vue来写一官网的时候,想引入外部字体文件,毕竟总感觉他自己的字体有点难看,在这里记录下 1.先下载字体文件所需的.ttf文件 我这里想引入的是华文行楷字体 百度后下载了一个3M多的ttf文件 或者https://www.jb51.net/fonts/点击此链接,进行字体下载 2.将字体文件引入 自己定义一个文件夹,放入下载好的.ttf文件 先自己定义一个font.css文件,将下载好的字体文件的路径引入 @font-face { font-family: "华文行楷"; src:

  • Vue如何引入远程JS文件

    问题 最近在使用 Vue 做东西,用到钉钉扫描登录的功能,这里需要引入远程的 js 文件,因为 Vue 的方式跟之前的不太一样,又不想把文件下载到本地应用,找了一下解决的方法,貌似都需要引入第三方的库,最后找到了解决方案,分享之. 思路 一开始的思路是在 Vue 加载完 Dom 之后(mounted),使用 JavaScript 脚本在 body 中插入远程的脚本文件. 后来发现了 Vue 的 createElement 方法,简单的封装一个组件解决问题. 解决方法 第一版代码(直接在操作 Do

  • vue.js学习笔记:如何加载本地json文件

    vue.js学习笔记:如何加载本地json文件

    在项目开发的过程中,因为无法和后台的数据做交互,所以我们可以自建一个假数据文件(如data.json)到项目文件夹中,这样我们就可以模仿后台的数据进行开发.但是,如何在一个vue.js 项目中引入本地的json文件呢,下面就将步骤贴出来.(此时项目是由webpack打包而成). 整个项目是由webpack打包而成.具体项目结构如下: 1:打包好的文件在此,http://pan.baidu.com/s/1dFCAzux 2:我们找到bulid>dev-server.js,然后打开 3:在里面加入这

  • 详解vue 模拟后台数据（加载本地json文件）调试

    本文介绍了vue 模拟后台数据(加载本地json文件)调试,分享给大家,也给自己留个笔记 首先创建一个本地json文件,放在项目中如下 { "runRedLight":{ "CurrentPage": 1, "TotalPages": 0, "TotalItems": 0, "ItemsPerPage": 100, "Items":[ {"DEVICEID":&quo

随机推荐