nginx配置vue项目为history模式访问

开发完vue项目后,使用vueRouter 的history模式,直接在nginx上部署访问时页面无法正常显示,总结以下两种使用场景

场景1部署在根目录

// vue.config.js 配置
publicPath:'/'
// router.js 配置
base:'/',
mode:'history'

nginx 设置

location ^~ /{
  // root  webapp/app; 根路径下面root和alias都可以
  alias  webapp/app;
  index  index.html index.htm;
  try_files $uri $uri/ /index.html;
}

场景2部署在非根目录

// vue.config.js 配置
publicPath:'/app'
// router.js 配置
base:'/app',
mode:'history'

nginx 设置

location ^~ /app{
  // root webapp/app;  如果是root会报错,改用alias
  alias  webapp/app;
  index  index.html index.htm;
  try_files $uri $uri/ /app/index.html;
}

你可能感兴趣的:(nginx配置vue项目为history模式访问)