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

路由文檔