【vue】多个vue单页应用history模式如何配合 nginx 使用

多个vue单页应用使用history模式如何配合 nginx 使用

多个vue单页应用使用history模式如何改造；
该项目使用了微应用，地址：微应用 doc

前端项目结构：

frontend6(主项目)
|-- project(子项目)
|-- project2(子项目)

父项目针对子项目路由配置：

const routes = [
  {
    name: 'project',
    path: '/project',
    component: () => import('@/views/project/index'),
    meta: {
      model: 'project',
      info: { show_slider: true, is_inner: false },
    },
    children: [
      {
        name: 'micro',
        path: '*',
        component: () => import('@/views/project/index'),
        meta: {
          model: 'project_micro',
          info: { show_slider: true, is_inner: false },
        },
      },
    ],
  },
  {
    name: 'project2',
    path: '/project2',
    component: () => import('@/views/project2/index'),
    meta: {
      model: 'project2',
      info: { show_slider: true, is_inner: false },
    },
    children: [
      {
        name: 'micro',
        path: '*',
        component: () => import('@/views/project2/index'),
        meta: {
          model: 'project2_micro',
          info: { show_slider: true, is_inner: false },
        },
      },
    ],
  },
].concat(Home);

Nginx配置

nginx 只需要配置对 / 的代理就可以了：

server {
        listen       8099;
        server_name  localhost;
        
        location / {
            root  /Users/mac/Desktop/frontend6;
            add_header Cache-Control no-store;
			add_header Pragma no-cache;
			add_header Expires 0;
			# 下面配置让所有的资源走根目录
			proxy_set_header Host $host;
			try_files $uri $uri/ @router;
			index index.html index.htm;
        }
        
        # 不要漏掉这个
		location @router {
		    rewrite ^.*$ /index.html last;
		}
}

以上的配置完全可以完成history模式的配置，并且解决了浏览器中刷新页面出现 404 的问题。