项目简介：一个使用了swiper插件制作的交互动画demo
github：github.com/AeahKa/inte…
Swiper官网：swiperjs.com/
Swiper中文站：www.swiper.com.cn/

问题1：升级vite版本后出现报错

创建项目后，我将vite版本从 ^1.0.0-rc.13 升级到了 ^4.2.1。
此时发现运行项目时会出现以下报错：
[vite] lnternal server error: Failed to parse source for import analysis because the content contains invalid JS syntax. lnstall @vitejs/plugin-vue to handle .vue files.

解决方法：
在根目录创建vite.config.js

// vite.config.js
import { defineConfig, sortUserPlugins } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
	plugins: [vue()],
})

问题2：打包项目时不能正确打包静态文件

运行打包后检查发现src/assets下的音频图片都没有被打包

解决方法：
在vite.config.js中修改打包路径

// vite.config.js
export default defineConfig({
	base: './',
	assetsDir: 'assets',
})

总结

最后vite.config.js的完整代码如下：

// vite.config.js
import { defineConfig, sortUserPlugins } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
	plugins: [vue()],
	base: './',
	assetsDir: 'assets',
})