Vite+Vue3 のパッケージ化の問題

文字化けしたコードを報告するビルド エラー

执行 pnpm run build 后报错

理由: 画像のサフィックスは .PNG ですが、これを .png に変更すると解決されます。

デプロイメント ページが空白で、コンソールにエラーが報告される

パッケージ化が完了すると、サーバーにデプロイされたページが白色になり、コンソールが表示されます

理由: vite.config.js ファイルはベース フィールドを構成する必要があり、値はサーバーのルート ディレクトリ内の静的ファイルの場所です。

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. リソースをパブリックフォルダーに入れる