如何將vue項目部署到騰訊雲伺服器
Ⅰ 小白研究項目部署-關於vue項目部署遇到的一些問題
在搞清root，alias，try_files的基本用法後，我開始嘗試vue項目的部署。
（用法我之前的文章也研究過）
此前，聽說挺多小夥伴會遇到vue-router-history模式種種問題，比如路徑無法匹配，找不到靜態資源，刷新頁面404，etc...
不急，只要找到原因，問題是可以迎刃而解的。
項目部署環境一般可以分為三種：生產環境，測試環境，開發環境。
開發環境 ：開發環境時程序員專門用於開發的伺服器，配置可以比較隨意，為了開發調試方便，一般打開全部錯誤報告和測試工具，是最基礎的環境。
生產環境 ：生產環境是指正式提供對外服務的，一般會關掉錯誤報告，打開錯誤日誌，是最重要的環境。部署分支一般為master分支。
測試環境 ：一般是克隆一份生產環境的配置，一個程序在測試環境工作不正常，那麼肯定不能把它發布到生產伺服器，是開發環境到生產環境的過渡環境。
測試環境的分支存在bug，一般不會讓用戶和其他人看到，並且測試環境會盡量與生產環境相似。
如何區分生產環境和開發環境？
process.env.NODE_ENV 是 node 的全局變數 process 的一個屬性，它的作用是區分當前環境是生產環境還是開發環境，
可以參考學習： 理解webpack中的process.env.NODE_ENV
其實一般的vue單頁面應用項目中，遇到路徑無法匹配，或者資源引用錯誤問題都是由於以下幾個屬性造成的，如果你經常翻官網文檔，那看到這里應該就已經會意，他們分別是：
接下來我將講解以下這幾個屬性的使用。
依照官網的解釋，貼一張用法圖：
當使用基於 HTML5 history.pushState 的路由時，「相對 publicPath」 會受到限制，即是說在使用history模式時，publicPath需要設置為絕對路徑。那麼在vue.config.js文件中，你應該這樣配置：
在nginx配置文件中你就需要這樣配置：
假設我的項目名為history，並且放在/usr/local/webserver/nginx/myProject 目錄下，如tree圖
示例貼一下： 珂朵莉的伺服器 (點擊about會使用路由跳轉)
如果你的配置出現頁面空白，或者404訪問錯誤，資源引用問題（F12可觀察），這時你就要檢查publicPath，assetsDir甚至是nginx有沒有配置正確了。
我覺得原因是頁面刷新時，伺服器找不到任何的靜態資源，就報404，那麼解決辦法就簡單了： 你要在服務端增加一個覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態資源，則應該返回同一個 index.html 頁面，這個頁面就是你 app 依賴的頁面。即使用try_files 尋找index.html。
可以參考本項目的nginx配置：
但如此配置後，你的伺服器就不再返回 404 錯誤頁面，因為對於所有路徑都會返回 index.html 文件。為了避免這種情況，你應該在 Vue 應用裡面覆蓋所有的路由情況，然後在給出一個 404 頁面。
參考官網例子：
另一方面,有可能是Vue-Router沒有配置好，需要注意初始化Router時候的base參數:
如此項目部署就完成了。
感謝博哥指出之前文章錯誤之處，已經修正，謝謝
Ⅱ vue項目要部署在伺服器上，那麼伺服器需要安裝node.js環境嗎
最好是安裝一個。
1.如果你僅僅是打包好的vue相機，那麼要看服務端使用的是什麼語言，如果是node的話，肯定要安裝node環境的，但是如果不是node，那麼就沒有必要了。
2.如果你想在服務端跑vue的項目，也就是在遠程端做開發工作，那麼肯定是要安裝node的，畢竟vue開發環境需要node。
基本上服務端也就這兩種需求，node包其實很小，安裝一個也不費事，還可以方便開發，我覺得在遠程端按一個最好。
Ⅲ 如何將自己寫的web項目用騰訊雲伺服器來運行新手求教！
先在騰訊雲買個雲主機，然後搭建好對應的Web環境，再上傳本地源碼就可以了。
如果是PHP的代碼，可以用護衛神PHP套件，一鍵安裝配置好。
Ⅳ 怎麼部署到騰訊雲伺服器
這個需要jsp環境的，需要一個系統的配置。在這里簡單兩句說不完。
Ⅳ 如何把本地網站部署到雲伺服器上
一、購買雲伺服器，這里以騰訊雲為例。
如何購買這里就不廢話了，購買成功後騰訊雲會給你一個站內信，告訴你登錄伺服器的用戶名和密碼(我這里買的是centos7.2版本的)
二、配置伺服器
如果你購買的是學生版的，它的默認配置是沒有數據盤的，只有一個系統盤，所以也不需要你進行分盤、格式化盤、掛載等操作。如非學生，請參考如下:
https://cloud.tencent.com/document/proct/213/2042
三、環境配置
如果運行自己本地開發好的網站需要一定的運行環境，那麼雲服務主機當然也要配置相應的運行環境，下面以lamp運行環境為例。通過yum命令安裝Mysql和PHP，注意，在centos7.x版本里已經沒有MySQL的集成包了(因為oracle想把MySQL閉源，社區人員開發出來maridb,也就是MySQL的衍生版)。具體細節請參考騰訊雲官方文檔：https://cloud.tencent.com/document/proct/213/2125
四、把本地文件上傳到雲端伺服器上
上傳位置為 /root/var/www/html
五、上傳資料庫文件。
a、首先通過騰訊雲的控制台或其他軟體都可以登錄到騰訊雲的伺服器上，登錄MySQL資料庫，然後創建資料庫。
b、把sql文件放到指定目錄下，然後通過source命令導入資料庫文件。
source命令導入SQL文件詳解鏈接
導入sql的命令行如下：
source 「路徑名」+/mytest_emp_dept.sql
==================================
六、如果有域名，將自己的域名綁定到伺服器的公網ip上。
Ⅵ 如何使用docker部署vue項目
熟悉vue項目的開發朋友應該了解，對於vue項目來說，上線其實就是執行npm run build 命令，然後將build出的dist文件夾上傳到伺服器上就可以了，對於現在的前後端分離項目來說，就是把dist放到nginx的html文件夾即可。
上傳的過程既可以手動實現，也可以通過jenkins這類在線編譯軟體，總之，殊途同歸。
除了上面兩種還有一種現在比較火的部署方式，就是docker部署，當然正如上面說的，docker也是要實現上面的操作，只不過有些差異而已。
針對docker部署需要了解的是，一般我們只需要拉取nginx鏡像，把dist文件夾寫入鏡像即可，不需要去鏡像裡面執行拉取代碼、執行編譯、打包等操作。這些操作一般在寫入鏡像執行。
這樣做的目的跟docker的理念是一致的，功能解耦，方便維護，而且對於一些大公司來說，可能還需要將編譯後的代碼進行掃描等操作，如果在docker鏡像內編譯的話如果出現錯誤是不好定位問題的。
那麼如何實現docker部署vue項目呢，操作如下參考：
文件目錄如下：
在vueProject 根目錄下新建Dockerfile文件，注意沒有後綴，nginx鏡像默認伺服器的目錄在/usr/share/nginx/html，內容如下：
build項目：
Build完成後會生成dist目錄
然後在vueProject根目錄下打開命令行執行如下命令生成鏡像：
注意最後是一個點，代表在當前目錄執行Dockerfile
如果沒報錯說明執行成功，此時可以在docker鏡像列表看到該鏡像。
啟動鏡像：
—name vp 代表自定義啟動的鏡像名稱
-dp 是-d,-p的簡寫
8088:80 代表在宿主機的8088埠映射鏡像的80埠，因為nginx默認的伺服器埠就是80
最後就是之前生成的鏡像名稱。
大功告成。
更多詳情：javascript技術分享
Ⅶ 怎麼把VUE項目部署到伺服器上面
1.使用xshell登錄到阿里雲伺服器。安裝nginx（本文安裝到/etc下）
[plain]view plain
cd/etc
apt-getupdate
apt-getinstallnginx
vim/etc/nginx/nginx.conf
userwww-data;
worker_processesauto;
pid/run/nginx.pid;
events{
worker_connections768;
#multi_accepton;
}
http{
##
#BasicSettings
##
tcp_nodelayon;
keepalive_timeout65;
types_hash_max_size2048;
#server_tokensoff;
#server_names_hash_bucket_size64;
#server_name_in_redirectoff;
include/etc/nginx/mime.types;
default_typeapplication/octet-stream;
##
#SSLSettings
##
ssl_protocolsTLSv1TLSv1.1TLSv1.2;#DroppingSSLv3,ref:POODLE
ssl_prefer_server_cipherson;
##
#LoggingSettings
##
access_log/var/log/nginx/access.log;
error_log/var/log/nginx/error.log;
##
#GzipSettings
##
gzipon;
gzip_disable"msie6";
#gzip_varyon;
#gzip_proxiedany;
#gzip_comp_level6;
#gzip_buffers168k;
#gzip_http_version1.1;
##
#VirtualHostConfigs
##
gzipon;
gzip_disable"msie6";
#gzip_varyon;
#gzip_proxiedany;
#gzip_comp_level6;
#gzip_buffers168k;
#gzip_http_version1.1;
#gzip_typestext/plaintext/cssapplication/jsonapplication/javascripttext/xmlapplication/xmlapplication/xml+rsstext/javascript;
##
#VirtualHostConfigs
##
include/etc/nginx/conf.d/*.conf;
include/etc/nginx/sites-enabled/*;
#以下為我們添加的內容
server{
listen80;
server_nameyour-ipaddress;
root/home/my-project/;
indexindex.html;
location/datas{
rewrite^.+datas/?(.*)$/$1break;
includeuwsgi_params;
proxy_passhttp://ip:port;
}
}
}
assetsPublicPath:'/test1/',
exportdefaultnewRouter({
base:'/test1/',//添加這行
linkActiveClass:'active',
routes
});
consturl='/datas/seller';
this.$http.get(url).then((response)=>{
.....
});
servicenginxstart
2.首先先配置nginx，然後再根據配置文件做下一步操作
打開/etc/nginx/nginx.conf文件
[plain]view plain
在nginx.conf中配置如下：
[plain]view plain
接下來就根據配置文件進行下一步工作。配置文件中的server_name後面是阿里雲伺服器的ip地址
3.配置文件中的listen是nginx監聽的埠號，所以需要在阿里雲伺服器上為80埠添加安全組規則
在本地的瀏覽器登錄阿里雲伺服器->進入控制台->點擊安全組->點擊配置規則->點擊添加安全組規則，之後配置如下（註：入方向和出方向都要配置）
4.配置文件中的root和index那兩行表示我們把項目文件夾放在/home/my-project下
例如有兩個項目文件夾分別為test1，test2，裡面都有index.html。則目錄結構如下
/home
|--my-project
|--test1
|--index.html
|--test2
|--index.html
則在瀏覽器輸入http://ip/test1/index.html
伺服器便會在/home/my-project中找到test1下的index.html執行；
如果在瀏覽器中輸入http://ip/test2/index.html
伺服器便會在/home/my-project中找到test2下的index.html執行；
這樣便可以在伺服器下放多個項目文件夾。
5.所以我們也需要在本地項目的config/index.js里的build下進行修改,如果要把項目放到test1下，則
[javascript]view plain
如果用到了vue-router，則修改/router/index.js
[javascript]view plain
6.nginx配置文件中的location則是針對跨域處理，表示把對/datas的請求轉發給http://ip:port,本文中這個http://ip:port下就是需要的數據，例如http://ip:port/seller,在本地項目文件中ajax請求數據的地方如下
[javascript]view plain
7.修改後在本地命令行下運行:cnpm run build 生成dist文件。把dist文件里的index.html和static文件上傳到伺服器的/home/my-project/test1下，目錄結構如下
/home
|--my-project
|--test1
|--index.html
|--static
8.啟動nginx
[plain]view plain
9.至此項目部署成功，在瀏覽器下輸入: http://ip/test1/index.html 即可
Ⅷ vue如何將項目部署到伺服器上並且使外網能夠訪問到
你的伺服器是什麼系統啊 ，，，linux LINUX、WINDOWS、NETWARE、UNIX。。
在linux
首先伺服器安裝node git nginx vue-cli
安裝好nginx 用你的公網ip訪問就可以看到 下面的頁面
這就可以了
還有 用express 部署這個 簡單些
Ⅸ 如何打包vue項目加node.js後端到雲伺服器
在命令行輸入npm run build:prod，等待打包完成
項目目錄下就會多出一個dist文件夾，裡面有index.html文件和static文件夾，
直接上傳到伺服器上就行了
Ⅹ vuejs怎麼在伺服器部署
用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、瀏覽器訪問即可