Vue.js踩坑記錄：vue-cli 3.0 項目打包後頁面空白

新建一個項目，使用vue-cli 3.0進行構建，使用了vux和vue-router，本地運行時是沒有問題的，可是在打包以後，頁面就一片空白，打開控制檯會看到是各類資源引用出錯。

這是由於webpack的配置不對，只須要將webpack的配置修改一下就好。

vue-cli 3.0 內置了webpack，而且將vue的配置文件做爲了一個可選的配置（建立時沒有），若是須要修改vue和webpack的配置，則須要本身建一個配置文件  vue.config.js  放在項目的根目錄下。

而後設置一個baseUrl：

module.exports = {

    baseUrl: './'

}

這樣在打包的時候，就能加載到靜態資源了。

 

而後這個時候還沒完，修改完以後，頁面變成了這個樣子：

 

 頁面上只剩一個在App,vue裏面的兩個跳轉按鈕，而且跳轉按鈕跳轉後也是不對的。

 這個是由於在router裏面的mode配置，默認設置爲 history ，只要將這個mode註釋掉再打包，就能正常顯示了。

 

固然路由的問題，也能夠使用history模式的路由，只是項目須要在服務器環境下運行。

好比使用node的serve，這個在vue-cli的文檔中有說：https://cli.vuejs.org/zh/guide/deployment.html

我是直接使用了phpstudy的環境運行瀏覽。