最近在使用vue-element-admin做网站前端（非后台管理）,平时用vue-element-admin做后台管理一般都会设置在二级目录下，并且带有#号（如https://www.abc.com/admin/#/），现在做网站前端了，就不能放在二级目录并且不能带有#号了，如https://www.abc.com就可以直接访问，过程遇到不少困难，记录一下。后端语言是Laravel，服务器是nginx
1、修改vue-element-admin的路由模式
router的默认mode为hash模式，关于hash模式，官方文档这样描述
它在内部传递的实际 URL 之前使用了一个哈希字符（#）。由于这部分 URL 从未被发送到服务器，所以它不需要在服务器层面上进行任何特殊处理。不过，它在 SEO 中确实有不好的影响。如果你担心这个问题，可以使用 HTML5 模式。
– -- 《Vue Router官方文档》
而关于history模式，官方文档是这样说的
当使用这种历史模式时，URL 会看起来很 “正常”，例如 https://example.com/user/id。漂亮!
这正符合我们的需求。于是在我们的项目中启动路由mode的history模式：
打开src/router/index.js文件，更改一下路由模式（默认注释的，取消一下注释）
const createRouter = () => new Router({
mode: 'history', // require service support
scrollBehavior: () => ({ y: 0 }),
routes: constantRoutes
})2、修改vue-element-admin的publicPath
打开根目录下的vue.config.js文件，将publicPath的值改为：'/'
修改完后，编译一下，再上传到Laravel的public目录下
3、修改nginx的站点配置
打开站点配置文件，将location / {}里的内容修改一下
location / {
try_files $uri $uri/ /index.html;
}重启nginx，输入站点域名，网站打开了，但发现网站用到的接口都报了405，
4、问题处理
原因是本来在nginx配置Laravel站点时，location / {}里的内容是要针对Laravel做专门的配置，现在为vue-element-admin做了配置，导致Laravel的api都无法请求了，于是为在nginx里专门为api\再做下配置：
location /api/ {
try_files $uri $uri/ /index.php?$query_string;
}就可以正常访问了
