爲何vue+webpack須要用到node，如何部署項目到服務器？

第一部分　

 　以前一直不太理解爲何要使用vue+webapck，還有在使用了vue-cli以後會用到後臺，即vue-cli自動幫咱們安裝了express服務器，在本地服務器上運行，由於咱們但願能夠模擬在真是服務器上的效果，然而又不可能始終在真實的服務器上運行，因此在本地服務器上運行就很重要了。

　　可是經過vue+webpack構建的項目如何部署到服務器上呢？

　　首先VUE 是一個javascript的前端框架，註定了它是運行在瀏覽器裏的，對服務器本地沒有任何要求，只要一個靜態文件服務器能經過http訪問到其資源文件就足矣！不管你是用apache ,ngnix 就算你要用node 本身實現一個靜態文件服務器，也用不了多少行代碼。

　　npm run dev 是用來在本地開發的時候作調試用的，vue開發的是前端的東西，不是nodejs 服務端程序，按道理講，生產環境裏就不應存在npm，甚至nodejs也不須要（用nodejs來作web靜態服務的除外），正確的作法很簡單，經過npm run build 把生成的dist文件夾（不要上傳文件夾）裏的內容上傳到http服務器上就能夠經過 http來訪問了，開發機上正常，上傳之後 程序出現錯誤不能運行的緣由99.99%的可能性是你引用資源的路徑有問題。

　　通常若是vue框架的程序上傳到網站服務器的根目錄下是不 會有問題的，也不存在資源文件引用錯誤的狀況，但若是你不是根目錄，就會有問題，經過vue-cli 生成的開發目錄，build之後默認引用資源文件的路徑是:

好比 app.js的引用方式<script type="text/javascript" src="/static/js/app.js"></script>

　　因此，若是你的目錄結構是 以下:

www/
 +hot/
   +static/
   +index.html

　　當你經過http://www.xxx.com/hot/index.html來訪問的時候 會出現找不到app.js。

　　由於index.html裏引用的app.js路徑是：

http://www.xxx.com/static/js/app.js

　　可是app.js的實際路徑是：

http://www.xxx.com/hot/static/js/app.js 因此出現了404

　　要解決的方法很簡單把引用方式 改爲以下兩種方式 均可以：

<script type="text/javascript" src="./static/js/app.js"></script>
或者
<script type="text/javascript" src="/hot/static/js/app.js"></script>
推薦這樣的方式，能夠保正在vue-router生成的url下也不出現問題

　　均可以，固然這也不須要手動去改。 

　　

　　或者在config中的index.js下修改webpack配置：

assetsPublicPath: './'
或者
assetsPublicPath: '/hot/',

　　這樣，咱們就基本解決了有服務器子目下運行的問題，

　　固然，若是你還用到了vue-router

　　要在router的配置中加上

export default new Router({
  mode: 'history',
  base: '/hot/', //加上這一行

　　用瀏覽器打開http://www.xxx.com/hot/

　　一切運行正常，點擊各類連接也能出來，可是因爲我啓用了history模式，我直接在瀏覽裏訪問 http://www.xxx.com/hot/item/1 這樣的url是又404了，爲何 我能夠在首頁經過點擊進入 http://www.xxx.com/hot/item/1 這個頁面，可是直接訪問又不行呢，

　　由於在history 模式下，只是動態的經過js 操做window.history 來改變有瀏覽器地址欄裏的路徑，並無發起http請求，但當你直接 在瀏覽器裏輸入這個地址的時候 就必定要先對服務器放起http請求，可是這個目標在服務器上又不存在因此就返回了404了，怎麼解決呢，就是把全部的請求所有轉發到http://www.xxx.com/hot/index.hmtl上就能夠了　　

　　我用的是apache 作web服務器的虛擬空間，並且開啓支.htaccess文件支持，我成個人文件里加上以下，就一切正常了，

<IfModule mod_rewrite.c>
  Options +FollowSymlinks
  RewriteEngine On
  
  RewriteCond %{REQUEST_URI} ^/(hot|hot/.*)$
  RewriteRule ^/hot/index\.html$ - [L,NC]
  
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteRule ^(hot|hot/.*)$ hot/index.html [L]
</IfModule>

這個配置的做用就是把全部服務器上不存在請求所有轉發到index.html上去，這樣就能夠直接經過各類url來訪問了

主要內容均來自：https://www.zhihu.com/question/46630687

 

 

第二部分： 實際問題的解決

　　這一部分即解決實際中遇到的問題。

　　我將文件打包成了production以後放在下面的目錄之下： 

　　這樣，即放在了tomcat的webapps下的bbg下的wechat2中，而沒有直接放在webapps的根目錄下，這樣在實際運行的過程當中，就會發現報錯，不能正常顯示，由於index.html引用的路徑都是/static/.... ，然而static 叜webapps的根目錄下，因此就會報錯。 

　　解決方法很簡答，即在config下的index.js中修改靜態資源的路徑：、

build: {
    env: require('./prod.env'),
    index: path.resolve(__dirname, '../dist/index.html'),
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/bbg/wechat2/',

　　從最後兩行，能夠看到這樣index.html最終引用的就是/bbg/wechat2/static了，成功執行。 

 

　　說明：之因此將靜態文件放在這裏運行，是由於咱們在bbg同級的目錄下放了一個war包。 war包實際上就是將一個zip文件的後綴直接修改成war，而後tomcat服務器在啓動時，就會自動解壓這個war包。解壓後就和你直接整套的去部署是同樣的，也就是經過war包能夠方便實際的運行。 

其實war文件就是Java中web應用程序的打包。借用一個老兄的話，「當你一個web應用程序不少的時候，若是你想把它部署到別的機器上，來回拷這些文件是件挺鬱悶的事情，若是要是一個文件就行了。。。那麼war文件就能夠知足你這個小小的要求」。

那有人會說，這和直接打成rar文件不同嗎？區別大了！

若是你直接打成rar文件，你得手動的去解壓縮，可是war文件不須要，你把它放到tomcat的webapp目錄下，就能夠直接運行了，我以爲這個功可以強大，哈哈。

在tomcat安裝目錄下的conf目錄下有個server.xml，搜索「unpackWARs」關鍵字，你會看到在<Host>標籤中會有對其的設置，若是設置成true，那麼tomcat在啓動的時候，會在webapps目錄下自動解壓你那個war文件；若是設置成false，則tomcat直接訪問war文件。

 

      <Host name="localhost"  appBase="webapps"
            unpackWARs="true" autoDeploy="true">

 

假如他的值是true，你的tomcat已經啓動了，你把自動解壓的文件夾刪了，tomcat又會自動解壓，我以爲它是實時的在檢查，一旦沒有，就會解壓。你能夠不用擔憂啓動它和放war的順序，或者啓動服務器和存放文件的順序。