前端 JS 经典:读取文件原始内容

前言:有些时候在工程化开发中,我们需要读取文件里面的原始内容,比如,你有一个文件,后缀名为 .myfile,你需要拿到这个文件里的内容,该怎么处理呢。

在 vue2 中,因为 vue2 使用 vue-cli 脚手架,构建工具用的 webpack。然后对不同后缀的解析使用的不同 load,我们自己定义的后缀文件 .myfile,webpack 不知道需要用什么 load 去解析它,所以我们需要在 vue.config.js 里面配置。

在组件中导入 .myfile 文件:

html 复制代码
<template>
  <div>{{ myfile }}</div>
</template>

<script>
  import myfile from "./xx.myfile";
  export default {
    data() {
      return {
        myfile,
      };
    },
  };
</script>

vue.config.js 配置 load 解析后缀名为 .myfile,raw-load 专门用来拿原始内容的。

javascript 复制代码
const { defineConfig } = require("@vue/cli-service");

module.exports = defineConfig({
  configureWebpack: {
    module: {
      rules: {
        text: /\.myfile$/,
        loader: "raw-loader",
      },
    },
  },
});

在 vue3 中就很简单了,直接给导入的文件加入后缀就可以:

html 复制代码
<template>
  <div>{{ myfile }}</div>
</template>

<script setup>
  import myfile from "./xx.myfile?raw";
</script>
相关推荐
ai小鬼头27 分钟前
百度秒搭发布:无代码编程如何让普通人轻松打造AI应用?
前端·后端·github
漂流瓶jz27 分钟前
清除浮动/避开margin折叠:前端CSS中BFC的特点与限制
前端·css·面试
前端 贾公子30 分钟前
在移动端使用 Tailwind CSS (uniapp)
前端·uni-app
散步去海边30 分钟前
Cursor 进阶使用教程
前端·ai编程·cursor
清幽竹客31 分钟前
vue-30(理解 Nuxt.js 目录结构)
前端·javascript·vue.js
weiweiweb88832 分钟前
cesium加载Draco几何压缩数据
前端·javascript·vue.js
幼儿园技术家33 分钟前
微信小店与微信小程序简单集成指南
前端
我不吃饼干9 天前
鸽了六年的某大厂面试题:你会手写一个模板引擎吗?
前端·javascript·面试
涵信9 天前
第一节 布局与盒模型-Flex与Grid布局对比
前端·css
李少兄9 天前
解决OSS存储桶未创建导致的XML错误
xml·开发语言·python