vue3.0 router在history模式下服务器配置问题

1. 打包部署在服务器根目录

1. 客户端在项目中的vue.config.js 配置

module.exports = {
    publicPath: '/'
}

2. 服务器配置，以Nginx服务器实例

   1. 爬坑1：通过vue官方文档，我们知道在服务器配置文件中去配置

       location/{try_files$uri $uri/ /index.html;}
      

   2. 但是会弄错去配置哪个文件，我在/conf/nginx.conf中搞了很久都不行，都快要放弃的时候，我看到了conf/vhost/0localhost_80.conf ，然后在这个文件中试了一下，就行了。官方文档没有说明仔细，经常导致掉坑里。

   3. 所以最后，我在conf/vhost/0localhost_80.conf 文件中配置

       location / {
       	index index.php index.html;
       	try_files $uri $uri/ /index.html;在这里插入代码片
       }
      

2. 打包部署在服务器子目录内

在子目录中部署项目需要配置几个地方

1. 在vue.config.js中配置

module.exports = {
	publicPath: '/web' // web为子目录名称
}

2. 在router/index.js中配置

const router = createRouter({
    history: createWebHistory('/web'), // web为vue.config.js 配置的子目录，如果在根目录部署不用填
    routes,
});

3. 在服务器配置conf/vhost/0localhost_80.conf

location /web {  // web为子目录名
	index index.php index.html;
	try_files $uri $uri/ /web/index.html;  //web为子目录名
}