乐趣区

关于前端:vitepress-部署基于arcodesignwebvue的组件库文档编译失败问题

问题

在胜利加载 vitepress 以及 arco-design 后,development 下开发失常,编译生产环境打包 arco design icon 失败。
npm run build 编译报错如下

export {default} from "./arco-vue-icon.js";
^^^^^^
SyntaxError: Unexpected token 'export'

环境

"vitepress": "^1.0.0-alpha.15",
"@arco-design/web-vue": "2.33.0",

复现办法

vitepress 的 theme 文件 index.js 如下配置

import ArcoVue from '@arco-design/web-vue'
import ArcoVueIcon from '@arco-design/web-vue/es/icon'

export default define<Theme>({
  ...DefaultTheme,
  enhanceApp: ({app}) => {app.use(ArcoVue)
    app.use(ArcoVueIcon)
    globals.forEach(([name, Comp]) => {app.component(name, Comp)
    })
  }
})

尝试思路

思路一:尝试批改引入 package.json type:’module’;失败
思路二:尝试批改导入文件门路,有效。

解决办法

因为 arco-design ssr 反对不欠缺,vite 屏蔽掉 ssr 时的 arco 组件,通过 unplugin-vue-components 主动导入 arco-design 即可。
vite.config.js 如下配置

import {defineConfig} from 'vite'
import DefineOptions from 'unplugin-vue-define-options/vite'
import Components from 'unplugin-vue-components/vite'
import {ArcoResolver} from 'unplugin-vue-components/resolvers'
export default defineConfig(async ({ mode}) => {
  return {ssr: { noExternal: ['@arco-design/web-vue'] },
    build: {chunkSizeWarningLimit: 2000},
    plugins: [DefineOptions(),
      Components({resolvers: [ArcoResolver()], deep: true }),
    ]
  }
})
退出移动版