vue项目history打包后部署在二级目录相关配置

history模式，因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接通过路由访问 就会返回 404。所以呢，要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面。
1.vue-router 路由的文件的配置，根据自己部署的二级目录填写

let router = new Router({
  mode:'history',
  base:"/dms"

2.在vue.config.js配置文件（如果没有新建一个，项目根目录下）

module.exports = {
　　publicPath:"/dms"
}

3.在入口文件中index.html 的head 标签内加入

  <meta base ="/web/">

4.最后就是服务端部署配置，以nginx 为例

{
 listen 80;
 server_name localhost;
 root /home/wwwroot/;
 location /dms{
  try_files $uri $uri/ /dms/index.html;
 }
}

配置完这些之后，可以通过二级目录访问到页面了，但是图片资料会加载不了。
1.通过img标签写的图片路径，如果是写的绝对路径例如/static/images, 图片就会访问不到，要改为static/images相对路径，（曾经犯过这样的错误记录一下）；
2.通过css background写的图片路径，如果是写的绝对路径例如/static/images, 图片就会访问不到，因为css在打包时会通过loader处理并且通过插件ExtractTextPlugin从JS中抽取出来，所以需要改配置；

 if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        publicPath: '../../',   //添加这行代码
        fallback: 'vue-style-loader',
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }

这样配置后打包发现还不行，还需要把css的绝对路径写法改为相对路径，比如background: url('/static/images/login/loginBg.png') no-repeat;改为background: url('../../../static/images/login/loginBg.png') no-repeat;

最后打包结果 image.png