nginx如何正确配置部署在子目录的vue项目（History模式）

[fxxqq]

Q1：Vue项目用Webpack打包后放到服务器上，但访问是404页面？ 原因是vue的项目为单页应用，路由找不到所致。所以要在nginx服务器配置对所有的路径或者文件夹进行跳转。重定向到首页index下，这样就都能找到路由了。 nginx配置

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

因为项目是子项目，所以不能放在根目录下，index.html需要放在一个新建的teacher目录

Q2：配置好nginx后，发现这样虽然不会404，但是页面全部转到了根目录的index.html，访问的是空白页面？

于是调整了nginx和vue-router的配置如下： nginx配置文件

###教师端 vue项目
location /teacher/ {
    index  index.html index.htm index.php;
    try_files $uri $uri/ /teacher/index.html;
}

vue路由配置

 routes: [{
    path: '/teacher/login',
    name: 'Login',
    component: Login,
    meta: {
        title: '教师端登录中心'
    }
 }, {
    path: '/teacher/courseCenter',
    name: 'CourseCenter',
    component: CourseCenter,
    meta: {
        title: 'CourseCenter'
    }
 }]

拓展： apache 做web服务器的虚拟空间，开启.htaccess文件支持,也可以解决vue项目配置子目录的问题。

<IfModule mod_rewrite.c>
  Options +FollowSymlinks
  RewriteEngine On

  RewriteCond %{REQUEST_URI} ^/(teacher|teacher/.*)$
  RewriteRule ^/teacher/index\.html$ - [L,NC]

  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteRule ^(teacher|teacher/.*)$ teacher/index.html [L]
</IfModule>