解决Vue3nginx后配置非根目录刷新页面报错空白

62 阅读1分钟

1.前端处理

1.router文件

// 创建路由 
export const router = createRouter({ 
// 在这里传入项目打包目录 
history: createWebHistory('/admin/'), 
routes: constantRoutes 
})

2.修改vite.config.ts

export default defineConfig({
    base: '/admin/',
    .....
})

后端处理

1. nginx .conf

配置中路径apps是我自建的存放前端页面的文件夹
起关键作用的是try_files $uri $uri/ /admini/index.html,当然上面项目文件夹admin也需保持一致

  1. alias 后面的路径是Vue项目打包后dist静态文件服务器存放路径,一般在nginx下面建一个文件夹存放
  2. tryfiles 后面的index.html路径与创建路由和vite.config.ts配置里面的base保持一致即可,可以多级目录
  3. location 后面的路径与index.html上级目录保持一致即可
    location /admin {
		alias /usr/soft/nginx/apps/dist/;
		autoindex on;
		index index.html;
		try_files $uri $uri/ /admin/index.html;
   }