Vue項目打包部署到服務器上的遇到的兩個問題

這兩天一直在忙活着搞自己的服務器，想着怎麼把用webpack打包的項目部署到服務器上呢，就打算init一個vue的創建示例，當我跑所有人都知道的npm run build的時候，好開心，幸福來得就是這麼突然：

第一個問題來了：打包部署的時候，index.html空白

高興的我，趕緊把dist代碼改了一下名字initApp，扔到服務器上一跑，結果沒有出來，然後就直接點擊一下dist的index.html，好傢伙，出來這個：

Terminal報錯：

 

這段話的意思就是說：構建文件務必放在一個HTTP服務器。直接打開index.html文件將不工作。

瀏覽器報錯誤：

看到這裏，基本上就明白怎麼回事了，直接去我的電腦下找static，找到纔怪，興奮的差了一下編譯出來得index.html,果然：

 

找到問題了，趕緊把href和src後面的路徑換成相對路徑，即"/static"換成"./static"，好了，真的好了。

那麼問題來了，怎麼在編譯的時候，就能正常的編譯出相對路徑呢？

我們知道打包的命令文件是config/build.js

到項目目錄下的config文件夾裏的index.js文件中,將build對象下的assetsPublicPath中的“/”，改爲“./”即可，就在前面加個點就可以了，

現在再重新打包一次 npm run build，刷新你的頁面，就可以看到啦，

其實原因就是：

在build文件夾下的utils.js代碼中：

exports.assetsPath = function (_path) {
  var assetsSubDirectory = process.env.NODE_ENV === 'production'
    ? config.build.assetsSubDirectory
    : config.dev.assetsSubDirectory
  return path.posix.join(assetsSubDirectory, _path)
}

 

看到這裏啊，又出現個問題，assets和static這兩個文件有啥區別呢？？？

第二個問題來了：assets和static這兩個文件有啥區別呢？？？爲啥刪除static這個空文件報錯呢

區別就是，static裏的文件一般是js庫，UI庫，而assets裏一般都是我們項目用的圖片，字體等等，後者需要webpack重新打包編譯，而前者直接拿來即用，爲了證明我的判斷，在發佈生產的時候，static裏的文件肯定是直接複製到dist下的，果然，代碼中有驗證：

給大家推薦個帖子：

https://segmentfault.com/q/1010000009842688

https://blog.csdn.net/wbiokr/article/details/73011288