关于vue3打包后配置nginx 404 的一些探索_vue3加后缀以后nginx找不到文件-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_32486011/article/details/125085902

本文介绍了在Vue.js应用中使用history模式时，如何配置Nginx服务器以避免404错误。重点讨论了$uri在Nginx配置中的含义，以及try_files指令的工作原理。同时，指出了在Vue路由配置中可能导致页面空白的问题，即使用import时的正确写法。此外，还强调了Vue项目开发环境下的devServer代理设置，指出忘记添加前缀可能导致的错误，并提供了正确配置示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关于这个问题官网已经给出答案了。
官网: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,
	},