vue專案實戰中遇到的坑以及解決方法

坑1. 用webpack打包後存取index.html出現資源載入404問題

解決方案：config中index.js中，build物件中的assetsPublicPath屬性的層級需要由 '/' 調整為 './'

#

 1  build: { 2     env: require('./prod.env'), 3     index: path.resolve(__dirname, '../dist/index.html'), 4     assetsRoot: path.resolve(__dirname, '../dist'), 5     assetsSubDirectory: 'static', 6     assetsPublicPath: './', 7     productionSourceMap: false,12     productionGzip: false,13     productionGzipExtensions: ['js', 'css'],18     bundleAnalyzerReport: process.env.npm_config_report19   }

 1 dev: { 2     env: require('./dev.env'), 3     port: 8080, 4     autoOpenBrowser: true, 5     assetsSubDirectory: 'static', 6     assetsPublicPath: '/', 7     proxyTable: {}, 8     // CSS Sourcemaps off by default because relative paths are "buggy" 9     // with this option, according to the CSS-Loader README10     // ()11     // In our experience, they generally work as expected,12     // just be aware of this issue when enabling this option.13     cssSourceMap: false14   }

#原因：

開發環境的static資料夾是基於根目錄的，所以直接用 '/' 。例如這種格式：http://localhost:8080/static/img/logo.png。

大家應該都知道，webpack打包會自動把static資料夾打包進去，預設會產生一個dist資料夾作為生產環境檔案的根目錄，在dist裡面才會產生static資料夾。因此產生的格式應為http://localhost:8080/dist/static/img/logo.png。不是基於根目錄，所以 ‘/’ 肯定是找不到對應資源的。

介紹這幾個屬性的意義：

assetsRoot: webpack輸出的目標資料夾路徑

assetsSubDirectory: webpack編譯輸出的二級資料夾

assetsPublicPath: webpack編譯輸出的發布路徑，例如：www.woshichihuo.com/eat 中的 /eat就是這個路徑

 坑2. 用webpack打包後本地存取index.html出現白屏，資源載入正常

解決方案：#路由設定mode不要設定為history模式，預設還是hash。 router資料夾下index.js檔案中。

1 const router = new Router({2   // mode: 'history',3   routes: [4     index,5     home6   ]7 })

如果需要history模式，請參考vue-router官方文件：

 

#

以上是vue專案實戰中遇到的坑以及解決方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！