解決靜態資源失效的問題

這就需要修改我們的 config 中的 index.js了，預設的build 中的部分是這樣的：

 build: {
  // Template for index.html
  index: path.resolve(__dirname,'../dist/index.html'),// Paths
  assetsRoot: path.resolve(__dirname,'../dist'),assetsSubDirectory: 'static',assetsPublicPath: '/',

修改之後的應為這樣的:

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

但是這樣能確保資原始檔可被正常找到,但頁面還是處於白屏狀態,

在路由頁面找到mode: 'history',

export default new Router({
 mode: 'history',routes: [

將mode: 'history',這句話刪除,在進行build,

export default new Router({
 // mode: 'history',routes: [

小夥伴們,是不是發現好用啦~

補充知識：vue關於build和config檔案都已修改，但打包後圖片仍找不到的問題

最開始發現有的圖片可以加載出來有的卻不能，然後去看build和config檔案的配置，

都很ok啊。

然後去看那些可以加載出來的跟不能載入的做了對比，發現不能加載出來的都是把路徑寫在js裡面，用變數的方式寫進html裡面的，最後的解決方式就是：

//以require形式匯入圖片

url:require('../../static/xxx.png')

然後打包就沒問題了；

後面再補充一下，background屬性引入圖片的話如果以行內元素引入也會造成圖片路徑找不到的情況，解決的辦法就是把它寫在style裡面，以類名的方式引入；

總結一下，vue裡面引用圖片在打包後仍能正常使用的正確引用方式：

html內：img src以相對路徑引入；

css：style以background屬性作為背景圖片引入，需以類名方式引入，行內樣式可能會不生效；

js：以require('…/url')引入，賦予變數；

以上這篇解決vue專案 build之後資原始檔找不到的問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。