关于vue3打包后 配置nginx 404 的一些探索

关于这个问题官网已经给出答案了。
官网:https://router.vuejs.org/zh/guide/essentials/history-mode.html
那下面简单说下我的探索
在官网的代码中

try_files $uri $uri/ /index.html;

其中的 $uri 是什么呢？？我查了一些nginx的文档说明

$uri 表示当前请求的URI不带任何参数
而 try_files 意思是
try_files首先会去 $root 找有没有对应的文件或者api, 如果没有就会 fall back 到 try_files 的最后一个选项 /index.html，发起一个内部 “子请求”，也就是相当于 nginx 发起一个 HTTP 请求到http://localhost/index.html

做完上面的步骤还是会出现问题，就是路径显示正常，但是内容会空白。
我原先的router 文件写法是

 {
    path: '/xxx/xx/xxx',
    name: 'xxxx',
    component:  import('@/views/xxx/xx/xxx.vue'),
  },

这种写法会导致空白，具体原因尚不清楚。后面改成

 {
    path: '/xxxx/xxxx/xxxx',
    name: 'xxxx',
    component: () => import('@/views/xxxx/xxxx/xxxx.vue'),
  },

开发环境 404

应该检查是不是配置了 devServer 代理
下面是错误写法

	devServer: {
		port: 5012,
		proxy: {
			"/": {
				// 测试网
				target: "http://xxx.xxx.xxx.com/",
				ws: true,
				changeOrigin: true,
				pathRewrite: {},
			},
		},
		disableHostCheck: true,
	},

正确的写法是加上前缀

	devServer: {
		port: 5012,
		proxy: {
			"/customer": {
				// 测试网
				target: "http://xxx.xxx.xxx.com/",
				ws: true,
				changeOrigin: true,
				pathRewrite: {},
			},
		},
		disableHostCheck: true,
	},