Vite+Vue3打包问题

构建报错乱码

执行 pnpm run build 后报错

原因：图片后缀为.PNG，改为.png后解决

部署页面空白且控制台报错

打包完成后部署到服务器页面白屏且控制台显示

原因：vite.config.js文件需要配置base字段，且值为服务器根目录静态文件位置

配置vite.config.js

export default defineConfig({
    plugins: [vue()],
    base: '/zhihu/'
})

路径位置

部署页面空白

按照以上步骤操作后控制台无报错，但页面仍空白

配置 router/index.js 文件

const router = createRouter({
	/* 此处路径为最终页面相对服务器根目录地址 */
    history: createWebHistory('/zhihu/'),
    routes
})

图片路径错误

参考 Vite静态资源处理

1. 使用import引入

import imgUrl from './img.png'

2. 将资源放入public文件夹