Vue、React前端项目打包部署

前端单页面应用部署

前端打包上线部署方案之 hash路由模式

对于hash路由模式打包的单页面应用，直接发布到服务器，使用nginx指向到对应文件目录即可，通用配置一般如下：

location / {
  root /path/to/dist; // 服务器dist目录
  index index.html index.htm;
}

前端打包部署方案之history模式路由

对于history模式路由模式的单页面应用，因为在浏览器请求静态资源的时候，是去服务器查找真正的资源路径，而我们的应用是单页面，通过路由分发的形式去加载资源的，若不配置，就会导致资源加载404，通常history模式路由的nginx的配置如下：

location / {
  root path/to/dist; // 服务器dist目录
  index index.html index.htm;
  try_files $uri $uri/ /index.html; //访问前端路由，都转到index.html进行路由处理！！！
}

：

对于直接配置到根服务器的history模式我们可以这么配置，但是对于配置到二级目录的路由模式，这种方法就是个坑，通常配置到二级目录的路由处理方式如下：

location /app {
  root path/to/dist; // 服务器dist目录
  index index.html index.htm;
  try_files $uri $uri/ /app/index.html; //访问前端路由，都转到index.html进行路由处理！！！,注意此处变化。
}

：

如果根路由下有静态资源已经指向另一个单页面应用，那么注意点1中的配置可能无用，需要将上面的 root改为alias

：

上面的路由配置好之后，项目打包部署之前，要根据环境区分打包的静态资源路径，要在项目中配置

publicPath: isDev? '/': '/app'

同时router的base 路径要设置为 /app