Vue3路由模式为history，使用nginx部署上线是空白的问题

一、问题

将vue使用打包后

npm run build

将dist文件的内容，放入nginx的html中，并在nginx.conf中，设置端口

启动nginx，打开发现网页内容为空白

二、解决问题

1.配置vue-route

const router = createRouter({history: createWebHistory('/'),
});

2.配置vite.config.js或vue.config.js

在vite.config.js中加入以下代码

export default defineConfig(({ mode }) => {const isProduction = mode === 'production'return {// ...base: isProduction ? '/' : '/'}
})

如果配置了vite.config.js就不用配置vue.config.js，在vue.config.js加入以下代码

module.exports = {publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
};

3.配置nginx

在conf目录下，配置nginx.conf

    server {listen       8080;server_name  localhost;location / {root   html;index  index.html;# 需要指向下面的 @router 否则会出现 Vue 的路由在 Nginx 中刷新出现 40 try_files  $uri $uri/ @router; }# 对应上面的 @router，主要原因是路由的路径资源并不是一个真实的路径，所以无法找到具体的文件# 因此需要 rewrite 到 index.html 中，然后交给路由在处理请求资源location @router {rewrite ^.&$ /index.html last;}}

关闭nginx

 taskkill /F /IM nginx.exe

再次启动就会成功！！！