Vue3+vite打包后页面空白问题

一、白屏

原因：资源路劲问题修改：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;
			}
		}
 
    }