2024年最新Vue3+vite打包后页面空白问题_vue3 vite打包页面空白(1)，2024年最新阿里前端p6面试题

算法刷题

大厂面试还是很注重算法题的，尤其是字节跳动，算法是问的比较多的，关于算法，推荐《LeetCode》和《算法的乐趣》，这两本我也有电子版，字节跳动、阿里、美团等大厂面试题（含答案+解析）、学习笔记、Xmind思维导图均可以分享给大家学习。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

写在最后

最后，对所以做Java的朋友提几点建议，也是我的个人心得：

1. 疯狂编程

2. 学习效果可视化

3. 写博客

4. 阅读优秀代码

5. 心态调整

import { createRouter, createWebHistory } from 'vue-router'

import HomeView from '../views/HomeView.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    component: () => import('../views/AboutView.vue')
  }
]

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes
})

export default router

---

如果项目打包后放在二级目录运行；

例如：

项目放在：F:/test/dist

项目访问地址是：http://127.0.0.1/my_project

router.js

import { createRouter, createWebHistory } from 'vue-router'

import HomeView from '../views/HomeView.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    component: () => import('../views/AboutView.vue')
  }
]

const router = createRouter({
  // history: createWebHistory(import.meta.env.BASE_URL), // 这是默认的配置
  history: createWebHistory('/test'), // 打包后dist放在了 test 目录下
  routes
})

export default router

nginx配置

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;
			}
		}
 
    }

可参考：vue使用记录_刷新页面加载会触发哪几个钩子-CSDN博客 里面的【路由History模式打包页面空白】

常用的JavaScript设计模式

• 单体模式

• 工厂模式

• 例模式

  

函数

• 函数的定义

• 局部变量和全局变量

• 返回值

• 匿名函数

• 自运行函数

• 闭包

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】