vuejs怎麼在伺服器部署？

我提交到伺服器之後執行了 npm run dev之後關閉了是可以打開網頁的，但是關閉了ssh之後，服務馬上就不能用了，請問正確的部署方式是怎麼樣的？

npm run dev 可以跑起來一般是配置了個小型伺服器吧，比如 webpack 的 hot-dev 等，實際生產環境不會跑這個東西

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

還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的引用方式&

要在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文件支持，

我成我的文件里加上如下，就一切正常了，

&
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]
&


這個配置的作用就是把所有伺服器上不存在請求全部轉發到index.html上去，這樣就可以直接通過各種url來訪問了

---

用vue-cli搭建的做法

1、npm run build

2、把dist里的文件打包上傳至伺服器 例 /data/www/，我一般把index.html放在static里

所以我的文件路徑為：

/data/www/static

|-----index.html

|-----js

|-----css

|-----images

....

3、配置nginx監聽80埠， location /static alias 到 /data/www/static，重啟nginx

location /static {

alias /data/www/static/;

}

4、瀏覽器訪問http://ip/static/index.html即可

---

難道不是build出來一整個靜態文件夾然後nginx直接訪問么…還是我做錯了？

npm run dev的意思是通過npm管理運行開發模式啊…當然開發模式的運行路徑是人為定的…

---

pm2 做守護進程

nginx 代理埠

---

當然是在ci伺服器npm run build 然後再把dist文件夾里的靜態文件推送到正式伺服器啊......這裡大部分人都在說什麼啊....

---

這應該屬於運維範疇了，服務要nohup後關閉ssh才可以

---

nginx部署的時候開啟重寫，然後加上以下配置，vue中定義的路由全指到index.html

location / {
try_files $uri $uri/ /index.html;
}


---

正常情況下，部署到線上的vue項目，不可能是通過npm run dev命令執行後的結果。

應該執行npm run build命令，這樣就會在dist目錄下將整個項目編譯成靜態文件。然後將這些靜態文件放到伺服器上去，就可以了。

用戶訪問的html頁面，不管是nginx還是apache都能輕鬆配置。

---

2016年，乃至接下來整個2017年，如果你要問前端技術框架什麼最火，那無疑就是前端三巨頭：React、Angular、Vue。沒錯，什麼jQuery，seaJs，gulp等都逐漸脫離了熱點。面試的時候不吹上一點新技術，好像自己就不是搞前端的似的。

小編給大家推薦《 包學會之淺入淺出Vue.js：開學篇 》一文，本文將會通過很多一目了然的例子和一個實戰項目——組件庫，來幫助大家學習Vue，一步一步來掌握Vue。

文章內容摘要;

搭建環境

工欲善其事必先利其器，我們的學習計劃從學會搭建Vue所需要的環境開始，node和npm的環境不用說是必須的，現在前端流程化很熱門，基本上新的技術都會在這套流程的基礎上做開發，我們只需要站在巨人的XX上裝*就可以了。我假設你的機子上已經有了最新的node和npm了，那我們就只需要執行以下命令：

$ npm install -g vue-cli


構建完了之後，隨便進入一個我們事先準備好的目錄，比如demo目錄，然後在目錄中做初始化操作：

$ vue init webpack myProject


webpack參數是指myProject這個項目將會在開發和完成階段幫你自動打包代碼，比如將js文件統一合成一個文件，將CSS文件統一合併壓縮等。要是不知道webpack的話，建議先了解下為好，當然不了解也不影響我們接著往下走。

閱讀更多，請前往騰訊雲技術社區——《 包學會之淺入淺出Vue.js：開學篇 》

---

npm run dev一般是你用的模板給你定義的，打開項目文件夾下的package.json找找看"dev"的定義是啥。

我正在做的一個項目裡面npm run dev的定義是node server.js，然後在server.js里用webpack-dev-server建起了一個伺服器。估計題主的情況類似。

以上是背景。

然後說問題

1. 關掉以後就不能訪問了。npm run dev進程是你當前shell進程的子進程，在退出ssh時跟著shell一起被殺掉。解決方法有二，1.用forever跑server.js，2.用先打開tmux，在tmux里跑npm run dev，退出以後shell不會被殺掉

2. 這個不是題主提出的問題，但是隱含在題主的描述里。題主說「部署」，我理解為生產環境，但是npm run dev多半是開發環境。有區別嗎？有。1. bundle.js沒有混淆，源碼很容易被破解或者盜用。2. bundle.js沒有精簡，巨大，浪費流量。我現在做得項目里，npm run dev的js有7.5MB，npm run build（這個也是定義在package.json里的，每個項目不一樣）出來只有999KB。3.許多開發用的debug信息會暴露給用戶。解決方法，題主用的模板應該帶有生產伺服器的腳本。一般是在"start"這個script里定義生產伺服器的啟動代碼，並且附帶"prestart"鉤子腳本來實際構建項目文件。

除了以上提到的針對題主問題的兩點，個人建議用一個靜態的hosting服務，把webpack打包出來的index.html和bundle.js放上去就好了。推薦firebase hosting, 只是不知牆內能不能訪問。好處有很多，至少自己不需要提供伺服器了。

---

還以為是問SSR服務端渲染的問題，結果在伺服器上跑`npm run dev`是什麼鬼

---

剛在研究vue2，我還以為問的是SSR相關，進來一看，無描述，無log，我摔。

---

1. 如果是個純前端的項目，dist 目錄生成之後 Nginx / Caddy 或者其他伺服器代理過去即可

2. 如果項目中包含服務端邏輯，比如 ajax 請求後台是同一個工程提供的，那麼就會用到 pm2 之類的工具將 server 端的服務一直運行，一般也會用到 Nginx / Caddy 做反向代理，因為起 server 服務一般不是在 80 埠，而且可能存在多個後端項目一起運行

3. 如果是 Vue SSR 的項目，其實和 2 是一樣的，因為需要 SSR 肯定有後端邏輯的

當然最終發布的時候很多重複性操作都會交給 CI 之類的工具完成，如果只是個個人小項目，也可以寫個 shell 腳本完成，例如在 JounQin/vue-ssr DEMO 項目中每次需要發布的時候進伺服器目錄跑一下 yarn deploy 就好了。

---

既然知道了部署流程，我就貢獻一個部署教程吧nodejs伺服器部署教程二，把vue項目部署到線上 - 個人文章 - SegmentFault

---

run dev是開發環境，正確姿勢應該是將build後生成的丟上去

---

npm run build 把生成的文件放伺服器，搞定，我在自己的github page上就放了個。

---

npm run dev 是啟動的腳手架里webpack的server。和vue有毛關係。。。

---

vuejs是個前端框架，npm run dev的目的在於前端開發的時候可以實時調試、暗中觀察。

當開發工作完成的時候，需要對前端工程進行構建，得到html啊css啊js等文件，然後這些文件還是該怎麼用就怎麼用。

個人認為，這起到了職責分離，削弱服務端模板起到的作用。

---

如果是用vue-cli生成的項目的話，運行npm run build，然後把dist下生成的文件丟到一個nginx伺服器下面，配置nginx代理到你的index.html，就可以了。

關於nginx的配置直接去看官方文檔吧。

還有，注意publicPath的問題，在build之前去config文件里把prod的publicPath改成你配置的nginx域名+路徑。(publicPath是什麼可以參考webpack官方文檔)

---

推薦閱讀：