问题
在胜利加载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 }), ] }})