Vite+Vue3 packaging problem

Build error reporting garbled code

执行 pnpm run build 后报错

Reason: The picture suffix is ​​.PNG, which will be solved after changing it to .png.

The deployment page is blank and the console reports an error

After packaging is completed, the page deployed to the server is white and the console is displayed.

Reason: The vite.config.js file needs to configure the base field, and the value is the static file location in the server root directory.

Configure vite.config.js

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

path location

Deployment page is blank

After following the above steps, no error is reported on the console, but the page is still blank.

Configure router/index.js file

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

Image path error

Refer to Vite static resource processing

1. Use import to introduce

import imgUrl from './img.png'

2. Put resources into the public folder