vue2創建webpack項目build之后無法正常顯示頁面的問題

最近在做vue項目的時候,項目正常運行,但是當我打包上線之后,卻出現無法出現頁面空白的情況,打開控制台,發現無法加載到css和js文件.

仔細觀察發現路徑中少了一個dis文件夾,於是我加上dist文件夾單獨訪問css文件

http://localhost:4396/dist/static/css/app.5f6e046c01a10a67012602ec1dfe38ac.css

發現還是無法訪問到,后來想到由於我用的是websotrm編譯器,自帶的本地服務端口是localhost:4396,這是我自己設置的,后面需要加上項目名稱,於是加上我的項目名,

http://localhost:4396/vue-news/dist/static/css/app.5f6e046c01a10a67012602ec1dfe38ac.css,

發現這次可以訪問了,但是得修改index.html文件,這不是最好的解決辦法.

於是百度得到修改config/index.js里面的配置.

build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './',

    /**
     * Source Maps
     */

    productionSourceMap: true,

　　找到這一段代碼,將assetsPublicPath改為'./',原本是'/';

重新運行npm run build,這時候打開就能加載出來文件了.

but,頁面還是一片空白,再次打開控制台,文件都引入成功了,但是為什么還是沒有顯示頁面呢,我找到element選項里,發現頁面只有一個

<div id='app'></div>

他沒有任何子元素,我覺得應該是js里面的問題,但是不知道從何處找,無奈只能又百度,終於讓我找到答案了,

附上原文鏈接:http://blog.csdn.net/xjlinme/article/details/74783887;

原來是路由的事,我在路由里面設置了mode為history,這時候需要將每個路由加上項目名稱,如果不加的話就得將mode改成hash模式.

至此頁面就能正常打開了.