Go VUE --- vuejs在服務器部署？

感覺好多人把最基本的都忘了

還npm run dev

還守護進程,用守護進程也應該你自己用nodejs實現一個web靜態服務器而不是去守護npm run dev

樓主問的既然是布署，哪默認就應該是生產環境下的布署，vue開發的應用本質上就是靜態文件,無論你用何種web服務器，放上去就應該能通過http訪問

為什么現在好多人連這個都搞不定了呢？

原因在於現在太多的前端工具幫我們做了太多，而我們只學會了打命令，而沒有搞清楚這些命令到底做了些什么

接下來我來幫大家來捋一捋

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

npm run dev 是用來在本地開發的時候做調試用的，vue開發的是前端的東西，不是nodejs 服務端程序，按道理講，生產環境里就不該存在npm，甚至nodejs也不需要（用nodejs來做web靜態服務的除外），樓主通過ssh進入到服務器里，再運行npm run dev 來啟動哪是開發機上做的事情。正確的做法很簡單，通過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下也不出現問題 

都可以，當然這也不需要手動去改，

在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來訪問了