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
- Use import to introduce
import imgUrl from './img.png'
- Put resources into the public folder