一般在vue項(xiàng)目開(kāi)發(fā)的的過(guò)程中昌粤，有些人會(huì)很疑惑為啥預(yù)覽打包后的dist文件夾中的? index.html? 會(huì)報(bào)錯(cuò)顯，頁(yè)面顯示不出來(lái)呢啄刹？
本片文章將會(huì)介紹兩種快速的解決方案 （希望對(duì)大家能有所幫助??）涮坐；
第一種方案：在本地搭建express服務(wù)器，在服務(wù)器中運(yùn)行
?? ⑴ 首先可以創(chuàng)建一個(gè)文件夾 (例如:打包項(xiàng)目運(yùn)行文件夾）
?? ⑵ 安裝 express 和 express-generator生成器? ? ? ?
npm install express -g
npm install express-generator -g
?? ⑶ 創(chuàng)建一個(gè)express項(xiàng)目
express expressDemo （expressDemo是項(xiàng)目名）
注意：可能會(huì)出現(xiàn)如圖所示的報(bào)錯(cuò)
（1）管理員身份打開(kāi)powerShell 誓军，并切換文件夾
（2）輸入set-ExecutionPolicy RemoteSigned 然后輸入y或a
?? ⑷ 切換目錄到expressDemo袱讹，并下載依賴
cd expressDemo
npm install
?? ⑸ 把dist目錄下的所有文件復(fù)制到express項(xiàng)目的public文件夾下
?? ⑹ 運(yùn)行expressDemo項(xiàng)目
npm start
?? ⑺ 瀏覽器中輸入，便可以實(shí)現(xiàn)預(yù)覽了
http://localhost:3000/#/
第二種方案： （此配置vuecli3.0+, webpack 4+? ） 在vue項(xiàng)目的根目錄下建立一個(gè)vue.config.js文件昵时，其中進(jìn)行以下配置捷雕，然后npm run build之后， 打開(kāi)dist文件夾下的index.html即可預(yù)覽
module.exports = { publicPath:"./"};
此時(shí)需要注意一下壹甥，router的模式不能是?history 模式
??????????本文總結(jié)救巷，更推薦大家使用第二種方法，更簡(jiǎn)單省事兒句柠，如果想要了解其原理可以去vuejs官網(wǎng)和webpack官網(wǎng)浦译，還有很多知識(shí)等我們?nèi)W(xué)加油??！
