在使用如上框架搭建了一个中台应用,在旧项目中可以正常运行,推送到git重新拉取之后发现浏览器控制台报错:The requested module '/node_modules/dayjs/plugin/advancedFormat.js' does not provide an export named 'default';
目前已知项目中只有一个页面使用到与报错文件相关的ant-design-vue的date-picker组件,组件使用了 unplugin-vue-components 进行了按需引入,不知道如何解决当前问题。
```typescript
vite.config.ts
import { UserConfig, ConfigEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'
import vueJsx from '@vitejs/plugin-vue-jsx'
import path from 'path'
import legacy from '@vitejs/plugin-legacy'
import viteSvgIcons from 'vite-plugin-svg-icons'
import { viteThemePlugin } from 'vite-plugin-theme'
import { getThemeColors } from './src/utils/themeUtil' //自定义配置主题色
const pathResolve = (pathStr: string) => {
return path.resolve(__dirname, pathStr)
}
export default ({ command, mode }: ConfigEnv): UserConfig => {
return {
base: './',
plugins: [
vue(),
vueJsx(),
Components({
resolvers: [AntDesignVueResolver()],
dts: true,
include: [/\.vue$/, /\.vue\?vue&type=template/, /\.md$/]
}),
legacy({
targets: ['defaults', 'not IE 11']
}),
viteSvgIcons({
// 指定需要缓存的图标文件夹
iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
// 指定symbolId格式
symbolId: 'icon-[dir]-[name]'
}),
viteThemePlugin({
colorVariables: [...getThemeColors()]
})
],
resolve: {
alias: [
{
find: 'vue-i18n',
replacement: 'vue-i18n/dist/vue-i18n.cjs.js'
},
{
find: '@',
replacement: pathResolve('src') + '/'
}
]
},
css: {
preprocessorOptions: {
less: {
// modifyVars: generateModifyVars(),
javascriptEnabled: true
}
}
}
}
}
时间选择器组件代码:
```html
<a-col :span="4">
<a-date-picker
v-model:value="condition.createTimeDetail"
placeholder="请选择日期"
style="width: 100%;"
/>
</a-col>
<script lang="ts">
import { SearchOutlined, EditOutlined, UploadOutlined } from "@ant-design/icons-vue"
import { defineComponent, ref, onMounted, getCurrentInstance, reactive, toRefs, computed, onBeforeUnmount } from 'vue'
import type { Dayjs } from 'dayjs';
export default defineComponent({
setup() {
const state = reactive({
condition: {
conditions: '',
trackerId: undefined,
createTimeDetail: ref<Dayjs>(),
}
})
return {
...toRefs(state)
}
}
})
项目无法正常运行,对比了新旧项目中的node-modules/ .vite,发现无法运行的版本中, .vite文件夹缺少几个文件;
运行控制台报错:
Failed to write to output file: open D:\Project\Test\ant-vue3-vite-platorm\node_modules.vite\ant-design-vue.js: Access is denied.
浏览器控制台报错:
Uncaught SyntaxError: The requested module '/node_modules/dayjs/plugin/advancedFormat.js' does not provide an export named 'default' (dayjs文件)
1. 最开始以为是项目页面代码的问题,对比了两个项目中的逻辑代码一致;
2. 将原来的 vite-plugin-components插件 更改为 unplugin-vue-components,更改了相关配置后问题依然存在;
解决dayjs文件中的报错问题;