Vue3 造轮子 踩坑小结

1. 支持更低版本的node

对于node 10、 12不支持 import 和 ?.语法，有两种方法解决：
方法一是：手动使用旧语法require

const path = require ('path')

import path from 'path'  //Node 14以上版本支持

方法二是利用esbuild自动把TS转译成旧语法

//md.ts    先改文件后缀为ts
//@ts-nocheck  代码开头加这行注释

2. 在yarn build后，动态加载.md文件报错，无法显示页面

• 在yarn dev时，是可以正常加载.md文件的；

• 在yarn build时，生成一个新的部署，使用https-server dist -c-1，会新开一个8080端口，运行在dist目录，不是src目录，但无法显示动态加载的页面。

• 这是因为使用了动态加载导致其不知道在http://127.0.1:8080/markdown/intro.md路径下的intro.md是什么东西。

const md = filename =>h(Markdown, {path:`../markdown/${filename}.md`,key:filename});
//rollup在build代码是只做了分析，并没有运行md函数，
...
{ path: "intro", component: md('intro')},

• 解决办法是把动态加载改为静态加载：
• 什么是动态加载？也就是拼字符串markdown/${filename}.md，有一部分先不写，等运行时自动添加，即为运行时的动态。

//router.ts
//把所有的 md 事先加载好
import intro from './markdown/intro.md';
import getStarted from './markdown/get-started.md';
import install from './markdown/install.md';

const md = string =>h(Markdown, {content:string,key:string});
...
{ path: "intro", component: md(intro)},
        { path: "get-started", component: md(getStarted)},
        { path: "install", component: md(install)},

//Markdown.vue
<template>
  <article class="markdown-body" v-html="content"></article>
</template>

<script lang="ts">
export default {
  props: {
    content: {
      type: String,
      required: true,
    },
  },
};
</script>

• 解决import .md文件时，显示下划波浪线时：

//shims-vue.d.ts
declare module '*.vue'{
    import { ComponentOptions } from "vue"
    const componentOptions:ComponentOptions
    export default componentOptions
}
declare module '*.md'{
    import { ComponentOptions } from "vue"
    const str:string  //默认生成字符串
    export default str
}