利用http-server測試vue-cli打包後的項目

時間 2019-11-08

標籤利用 http server 測試 vue cli 打包項目欄目 HTTP/TCP 简体版

原文原文鏈接

目前在練習Vue，利用vue-cli腳手架開發了個vue2.0仿惟妮海購項目，在生產環境中一切良好，項目暫時告一段落，根據官方的npm run build打包後發現，在本身沒有線上服務器的狀況下，測試成爲一大難題（實踐發現，後面還有不少坑等着去填~~）。css

項目展現

安利一個項目中遇到的大難題另闢蹊徑：vue單頁面，多路由，前進刷新，後退不刷新html

打包測試（搭建服務器）

打包後的代碼必須放在服務器下才能運行哦！直接雙擊index.html是不行的。
下面介紹兩種搭建服務器的方式vue

本地搭建Apache服務器

開發項目，通常都會在本地搭建一個Apache服務器，各類Ahache服務器軟件琳琅滿目，本身挑選一個適合本身的便可，本人目前在使用xampp。搭建Apache服務器比較繁瑣，各類配置比較複雜，這裏再也不贅述，有不懂得，請善用google or baidu。node

利用node.js的 http-server搭建一個http服務器

http-server是一個基於node.js的簡單的，零配置的命令行http服務器git

安裝

既然是基於node的，首先必須安裝node.js，這個略過不談。
全局安裝 http-server，這樣就能夠在任意一個本地項目中使用了。
npm install http-server -ggithub

使用

http-server [path] [options]
　
若是指定path,即爲指定的路徑，若是不指定，即爲當前所在文件路徑。options下面再介紹。
強烈建議直接在vue-cli打包後的dist文件夾下打開命令行，如圖所示，這樣就不用再指定文件路徑了

options選項說明

vue-router
- http-server默認啓用8080端口，可是這個端口容易和電腦中的某些任務衝突，強烈建議 利用-p 端口號指定一個新的端口。若是你想同時開啓兩個項目，則兩個項目必須指定不一樣的端口號，不然有一個項目是打不開的。
- 每次都手動打開瀏覽器？太麻煩了，添加配置項-o，當服務器啓動後，將自動打開瀏覽器。
- what ? 你的項目的請求接口是跨域的？不能直接訪問？固然，我這個項目也是跨域獲取的惟妮海購的接口，如何解決跨域這個問題呢？添加-P 域名地址便可.這個P是大寫的，上面端口那個p是小寫的。注意區分哦！
- 綜上，個人啓動服務器的命令即http-server -p 8890 -o -P http://www.weinihaigou.com
  
  按照正常狀況來講，這時會自動打開瀏覽器，渲染出你的項目,但是，我在打包測試時，還發現了一些其餘問題

啓動服務後可能會遇到的問題

跨域問題

若是你的接口在本地服務器，那就沒有跨域問題。若是你的接口在其它服務器，那就存在跨域問題。遇到跨域問題，最多見的控制檯報錯是No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:8828' is therefore not allowed access.,固然，也不排除其它報錯狀況。上面的http-server能夠幫你解決跨域問題，但前提是你命令行寫正確，我把上面的跨域地址少寫了個www，結果就報上面的錯誤。vue-cli

css、js沒執行 or 一片空白

有時候打包運行時發現一片空白，這可能就是打包後的css/js的引入問題了。默認的引入方式如圖
npm

是絕對路徑方式。咱們但願是相對路徑，能夠把config/index.js中的assetsPublicPath: '/',改成assetsPublicPath: './',這樣再打包出來的就是相對路徑了。segmentfault
運行打包後的項目時，在非首頁頁面刷新時直接404

若是你的項目出現這個問題，那麼你的router中必定是把mode定義爲history了。定義hash模式則不會出這個問題。難道只能用很醜的hash？固然不是，其實vue-router官方文檔的HTML5 History 模式對此已有說明，這個就須要後端的小夥伴幫咱們設置一下了。