Vue3+vite打包后页面空白问题及解决
作者：西门飘雪01
这段文章主要讨论了Vue3项目使用Vite打包后页面白屏的问题及其解决方案,文章指出,问题可能源于资源路径配置错误或跨域问题,并提供了修改vite.config.ts文件和配置@vitejs/plugin-legacy插件的方法,同时,建议安装本地服务器插件并配置Nginx解决跨域问题
一、白屏
原因：
资源路劲问题修改：vite.config.ts
export default defineConfig({
plugins: [vue()],
// 打包路径设置
base: process.env.NODE_ENV === 'production' ? './' : '/',
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})二、vue3 vite打包后页面白屏控制台报错
Access to script at 'file:///E:/vueProject/vue3-project/Vue3-big-event-admin/dist
1 安装兼容插件 @vitejs/plugin-legacy
npm i @vitejs/plugin-legacy -D
在vite.config.ts 中进行配置
// 引入@vitejs/plugin-legacy
import { defineConfig} from 'vite'
import legacy from '@vitejs/plugin-legacy';
// 在plugins中添加
export default defineConfig({
plugins: [
legacy({
targets: ['defaults', 'not IE 11']
}),
vue()
],
base：'./'
})
三、打包后依旧打开还是白屏
原因是需要服务器进行静态资源访问，否则会因为跨域而报错：
想要查看，可以安装一个本地服务器插件
npm install http-server -g
然后到 dist目录下在cmd 中运行
http-server -p 8090
然后输入地址访问就ok：
四、nginx.conf
server {
listen 80;
server_name localhost;
location /my_project {
alias F:/test/dist;
index index.html index.htm;
if (!-e $request_filename) {
rewrite ^/(.*) /my_project /index.html last;
break;
}
}
}总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。