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

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文件夹下
【vue|vue 如何引入本地某个文件 require】我在根目录下建立了css文件夹用来装样式文件

文章图片

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

文章图片

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