history模式下 二级目录部署访问是这样的

vue项目 history模式 二级目录部署简单说明

比如我要把项目部署到www.my-project.com的/app下 即通过 http://www.my-project.com/app 访问项目 同时采用 vue-router 的 history 模式 这里服务器是 nginx

废话不多说，直接走起

1. 设置vue-router的history模式 同时 base 设置 为 /app/

const router = new Router({
  mode: 'history', // history模式
  base: '/app/',   // base 设置 为 /app/
  routes
})

2. vue.config.js 文件 module.exports 的 publicPath值在打包时设置为 /app/

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/app/' : '/',
  ... //其他代码省略
  ...
  }

3. nginx 配置文件中 server 的location 配置

 location /app {   
   alias  /var/www/web-app/; # 部署vue打包后文件所属目录
   index  index.html;
   try_files $uri $uri/ /app/index.html;
 }
 # 说明 location 这里 /app 下边 try_files 中的 /app/index.html 是对应的 
 # 如果用 /admin  下边 try_files /admin/index.html; 当然 上边 1,2步骤的 app 也要改成admin

4. 说明: 此处部署路径为 /var/www/web-app/ 目录 web-app目录下的内容即 vue打包后的dist文件夹中的内容

web-app目录 执行 ls查看下文件

  $ web-app> ls
   css  favicon.ico index.html  js

5. 重启nginx即可 nginx -s reload

6. 访问 www.my-project.com/app 即可

7. 想配置多个项目， 比如 加个admin 路径 为 管理端项目 eg：如下

const router = new Router({
  mode: 'history', // history模式
  base: '/admin/',   // base 设置 为 /admin/
  routes
})

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/admin/' : '/',
  ... //其他代码省略
  ...
  }
  
location /admin {   
   alias  /var/www/web-admin/; # 部署vue打包后文件所属目录
   index  index.html;
   try_files $uri $uri/ /admin/index.html;
 }
# 重启nginx `nginx -s reload`
# 访问 http://www.my-project.com/admin