Vue3 根据路由（history 和hash 两种方式） 发布到Nginx 配置二级目录

废话不多说，直接上干货
Vue3 项目 里根据 路由选择 history 或hash 两种 方式 发布到Nginx 配置二级目录发布项目：

Vue3 采用 history 方式发布到Nginx

vue.config.js

const prod = process.env.NODE_ENV === 'production'
const publicPath = prod ? '/touristflow-bi/' : '/'
module.exports = {
  lintOnSave: false,
  productionSourceMap: false,
  publicPath: publicPath,
  devServer: {
    host: 'localhost',
    port: '30080', // 端口号
    https: false, // https: {type:Bollean}
    open: false,
    proxy: {
      '/api': {
        target: 'http://ip:8088',
        changOrigin: true,
        ws: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

router index.js

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

const routes = [
  {
    path: '/',
    name: 'Screen',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/Screen.vue')
  },
  {
    path: '/admin',
    name: 'Admin',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/Admin.vue')
  },
  {
    path: '/test',
    name: 'test',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/test.vue')
  }
]

const router = createRouter({
  history: createWebHistory('/touristflow-bi/'),
  routes
})

export default router

nginx.conf 配置

worker_processes  1;

events {
    worker_connections  4096;
}


http {
    include       mime.types;
    default_type  application/octet-stream;


    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       800 ;
		server_name  localhost;
		
       #管理平台
		location /touristflow-app {    
			alias F:\\nginx-1.20.2\\dist;
			index index.html index.htm;
			try_files $uri $uri/ /dist/index.html;
		}
		 #大屏
		location /touristflow-bi {    
			alias F:\\nginx-1.20.2\\bi;
			index index.html index.htm;
			try_files $uri $uri/ /bi/index.html;
		}

       # 后台服务
        location /touristflow{
              proxy_pass http://localhost:30080/touristflow/;
              proxy_set_header   Real-URI $request_uri;
            	proxy_set_header   Host    $host;
            	proxy_set_header   X-Real-IP   $remote_addr;
            	proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
        }


        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

        gzip on;
        gzip_min_length 1k;
        gzip_comp_level 9;
        gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
        gzip_vary on;
        gzip_disable "MSIE [1-6]\.";
    }

}

注意：
（1）vue.config.js 里 publicPath: ‘/trouristflow-bi/‘要跟 router index.js 里的 baseUrl :’/trouristflow-bi/’ 对应。
（2）nginx.conf 里配置二级目录方式
location /touristflow-bi {
alias F:\nginx-1.20.2\bi;
index index.html index.htm;
try_files $uri $uri/ /bi/index.html;
}
alias 跟 root 区别：
1 alias是一个目录别名的定义，root则是最上层目录的定义。使用root时，会到root + location 寻找资源；使用alias时，会到alias后定义的目录中找资源；
2 alias后面必须要用“/”结束，否则会找不到文件的。而root则可有可无;

try_files $uri $uri/ /bi/index.html

try_files -尝试访问对应的资源，在第一个资源访问不到时，访问第二个资源，以次向后

$uri Nginx地址变量，即为访问的地址

若访问url为 http://www.xxx.com/index.html 则 $uri 为 /index.html

$uri/ 表示一个目录，请求访问的目录，Nginx try_files可自行判断访问目的的类型 是为文件还是目录

若访问url为 http://www.xxx.com/user/class/ 则 $uri/ 为 /user/class/

所以以上配置的规则为 当 $uri 和 $uri/ 均不是对应资源时 则返回 /bi/index.html 页面

Vue3 采用 Hash方式发布到Nginx

只需要更改一个地方
const router = createRouter({
history: createWebHashHistory( ),
routes: routes
})