vue项目部署到非根路径时需要进行的修改

vue项目部署到非根路径时需要进行的修改

我们的项目是vue-cli4搭建的，路由模式是history模式，由于项目需要，将项目通过Nginx部署到了非根路径，就是https://blog.csdn.net/admin/这种，这时前端就需要对项目进行一些配置了。

• 首先修改vue.config.js中的配置，对配置项publicPath进行修改publicPath: '/admin/'。
• 由于项目axios是的baseURL是读取的配置文件，所以要修改对应部署环境配置文件中对应的axios的baseURL，比如这样VUE_APP_BASE_URL = 'https://blog.csdn.net/admin'。
• 本来修改完成以上以为已经全部修改完成了，之后部署完成发现路由跳转是基于根路径的，所以又在router.js也就是路由的配置文件中添加了配置项 base: '/admin'
• 还有一点，就是为了避免在history模式下刷新页面报404，Nginx需要进行以下配置

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