Vue项目部署到线上页面空白

最开始的时候直接什么都没有配置，打包了一个dist文件夹扔给后端，发现文件加载报错404，以下：

 

 发如今加载css文件和js文件的时候是否是从dist文件开始找的，这是由于默认会从index.html所在的硬盘的根目录下开始查找，天然没法找到。修改：

configjs文件 publicPath: './',

这时就再也不是绝对路径的根目录了，而是改成了相对路径，同目录下进行查找。

 

配置了文件后

router文件夹下的index.js

const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, base:'/secops/nsoc/', //这个必配，是index.html所在的路径地址
  scrollBehavior:() => ({ y:0 }), routes })

vue.config.js

    publicPath: './',// 修改路径，3.3起已经用publucPath代替了baseUrl
    assetsDir:'static', lintOnSave: true, // 在保存时校验格式
    productionSourceMap: false, // 生产环境是否生成 SourceMap

如图：

 

 此次是能够获取到文件的正确路径可是页面仍是空白不显示

查看打包后的源代码

 

 发现组件并无挂载到页面上

咱们的页面是使用路由来挂载的，那就是说路由出了问题，因而找资料，真是，，，，一路坎坷，终于在一篇文章中提到了和个人问题同样的这个解决方案

https://blog.csdn.net/qq_32340877/article/details/79105032

 

缘由是咱们的router使用的是history路由模式，这种模式在上线的时候要和后端配合使用，咱们的后端并不知道这个怎么搞。。。。，因而我就改为了hash模式，果真问题解决了。

路由文档