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模式，果然問題解決了。

路由文檔