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的環境運行瀏覽。