前端简单数据存储：跳过后端数据库的一种高效策略，应对一些不需要后端访问数据库的简单操作：静态 Markdown 文件存储

问题提出：

在一些应用场景中，有些数据并不重要，也不需要频繁地进行动态增删改查，比如品牌历史、产品介绍等说明性内容。 为此，我选择在前端直接存储这些静态数据，跳过后端数据库调用。本文将分享如何利用 Vue 工程中直接存放 Markdown 文件与内嵌数据，将数据管理与业务逻辑解耦，从而实现快速开发、便于维护和灵活更新的目的。

静态 Markdown 文件存储方法案例：

原理：

将 Markdown 文件（如 brandHistory.md）放在 Vue 项目的 public 文件夹中。 在 Vue 组件中，通过 Axios 异步加载文件内容，再使用 Markdown 转换器（如 marked）将 Markdown 解析为 HTML 显示到页面上。

步骤

在vue页面代码加入md转换的HTML代码：(这里以我的brandhistory.vue举例)

配置babel和webpack：

为什么需要配置？

1. 项目中使用了 ECMAScript 新特性（比如可选链运算符 ?.），这些特性并不是所有目标环境原生支持，因此需要 Babel来进行转译。
2. 引用了如 marked 这样的第三方库，且该库的新版本中使用了可选链语法。由于默认情况下，Babel 不会转译node_modules 内的代码，所以需要在 Webpack 配置中单独对 marked 进行转译。
3. 你需要已经安装好了 Babel、@babel/plugin-proposal-optional-chaining 以及 babel-loader 等依赖，这样才能让 Babel 正常工作。 默认情况下 Vue CLI 的构建方式不会转译 node_modules 下的代码。如果第三方库使用了不被老环境支持的新特性，就会出问题。因此，需要通过 vue.config.js 的 chainWebpack添加针对特定模块（这里是 marked）的转译规则。
4. Vue CLI 工具默认配置了 Babel 和 Webpack。所以你能够通过babel.config.js 进行 Babel 转译，并通过 vue.config.js 定制 Webpack 构建流程。

文件目录结构：

babel.config.js：

module.exports = {
  plugins: ["@babel/plugin-proposal-optional-chaining"],
  presets: [
    '@vue/cli-plugin-babel/preset',
    [
      "@babel/preset-env",
      {
        targets: {
          node: "current"
        }
      }
    ]
  ]
}

vue.config.js：

// vue.config.js
module.exports = {
    chainWebpack: (config) => {
      config.module
        .rule('transpile-marked')
        .test(/\.js$/)
        // 将需要转译 marked 模块的部分加入 include
        .include.add(/node_modules[\\/]marked/).end()
        .use('babel-loader')
        .loader('babel-loader')
        .options({
          // 如果有额外的 Babel 配置也可以在这里配置，
          // 但一般情况下它会自动读取 babel.config.js
        });
    }
  };
  

配置好保证了不让 marked 模块因为使用新语法而导致构建失败，从 node_modules 中的 marked 文件也通过 Babel 进行转译。

具体报错问题指引：

报错一：导入问题

TypeError:
marked__WEBPACK_IMPORTED_MODULE_1___default(...) is not a function
Uncaught (in promise) AbortError: The play() request was interrupted by a call to pause().

这个错误通常是因为新版 marked 库（v3 及以后版本）的导出方式与旧版不同，不能再直接用默认导入来使用函数。解决方案是使用命名导入。
新版 marked 的正确导入方式:

import { marked } from 'marked';
// ...
this.htmlContent = marked(this.markdownContent

报错二：配置写法问题

\src\main.js: .targets is not allowed in preset options [1] at Array.forEach () [1] at cachedFunction.next () [1] at loadPresetDescriptor.next () [1] at recursePresetDescriptors.next () [1] at Generator.next ()

解决方法：
这个错误说明 Babel 配置中的 presets 写法有问题。错误信息指出 .targets 不允许直接作为预设（preset）的选项，而是需要包装在一个数组里，作为该预设的配置对象传递。也就是说，你需要把 @babel/preset-env 与它的配置一起放到一个数组中。
例如：

module.exports = {
  plugins: ["@babel/plugin-proposal-optional-chaining"],
  presets: [
    '@vue/cli-plugin-babel/preset',
    [
      "@babel/preset-env",
      {
        targets: {
          node: "current"
        }
      }
    ]
  ]
}