一、白屏
原因:资源路劲问题修改: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;
}
}
}