本文主要是介绍前端 JS 经典：读取文件原始内容，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
前言：有些时候在工程化开发中，我们需要读取文件里面的原始内容，比如，你有一个文件，后缀名为 .myfile，你需要拿到这个文件里的内容，该怎么处理呢。
在 vue2 中，因为 vue2 使用 vue-cli 脚手架，构建工具用的 webpack。然后对不同后缀的解析使用的不同 load，我们自己定义的后缀文件 .myfile，webpack 不知道需要用什么 load 去解析它，所以我们需要在 vue.config.js 里面配置。
在组件中导入 .myfile 文件：
<template><div>{{ myfile }}</div>
</template><script>import myfile from "./xx.myfile";export default {data() {return {myfile,};},};
</script>vue.config.js 配置 load 解析后缀名为 .myfile，raw-load 专门用来拿原始内容的。
const { defineConfig } = require("@vue/cli-service");module.exports = defineConfig({configureWebpack: {module: {rules: {text: /\.myfile$/,loader: "raw-loader",},},},
});在 vue3 中就很简单了，直接给导入的文件加入后缀就可以：
<template><div>{{ myfile }}</div>
</template><script setup>import myfile from "./xx.myfile?raw";
</script>这篇关于前端 JS 经典：读取文件原始内容的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
