前端怎麼打包部署到伺服器

㈠ 一個前端頁面如何部署

一個前端頁面，在本地直接打開就能訪問。另外如果是要放到伺服器下的話，可以裝個nginx，或者apache，或者tomcat，直接放到網頁路徑下，就行。

㈡ 如何把項目部署到遠程伺服器上

步驟如下：
1、確保項目在MyEclipse上能夠正常運行。
2、在Tomcat安裝目錄下的webapp目錄中新建一個文件夾。
3、將META-INF文件夾、WEB-INF文件夾及所有的前端代碼復制到第2步新建的文件夾中。
4、將build中的classes文件夾復制到WEB-INF文件夾中。
5、啟動Tomcat即可訪問，外網使用IP+埠也可以訪問。

㈢ webpack打包後的代碼，如何部署到伺服器上

本文章前端代碼是基於vue+webpack開發的

Nginx是一款輕量級的Web 伺服器/反向代理伺服器

首先，webpack配置如下

在開發過程中，我們是通過npm run dev在開發環境中運行代碼
如果要部署到生產環境中，可以運行npm run build進行上線打包

打包完成後，會發現項目中多了dist這個文件夾

執行結果和webpack的配置文件一致。

代碼被webpack打包完成後下一步就是部署到伺服器上，此文僅適合於前端代碼是部署在windows操作系統的nginx服務中。
這里假設：
Windows操作系統：windows server 2008 64位
Nginx服務：nginx-1.12.2 64位

1.下載nginx-1.12.2 64位解壓，假設nginx-1.12.2放在D:nginx-1.12.2目錄中，nginx目錄結構。如圖下

2、前端代碼放在D:nginx-1.12.2html目錄中，dist目錄就是剛剛前端打包完的代碼。如圖下

3、在D:nginx-1.12.2conf目錄中，有個nginx.conf配置文件，進行編輯這個文件

4、假設前端的埠號為8082，如果埠號被佔用，請修改為其它埠號。後台服務訪問地址http://192.168.121.**:8080,

5、打開cmd控制台，進入目錄D:nginx-1.12.2中，用start nginx命令啟動服務，然後用tasklist /fi "imagename eq nginx.exe"，查看nginx服務是否啟動。

4、如果改變配置文件時，需要用nginx -s reload 命令重啟nginx工作進程。

5、關閉服務
nginx -s stop
nginx -s quit 安全關閉
taskkill /F /IM nginx.exe > nul 關閉所有nginx服務

㈣ 前端通過gulp編譯後的文件，怎麼部署到伺服器

伺服器上寫部署腳本，從代碼庫里拉項目代碼，跑gulp自動化。或者打包傳給後端讓他搞。

㈤ vue項目要部署在伺服器上，那麼伺服器需要安裝node.js環境嗎

最好是安裝一個。
1.如果你僅僅是打包好的vue相機，那麼要看服務端使用的是什麼語言，如果是node的話，肯定要安裝node環境的，但是如果不是node，那麼就沒有必要了。
2.如果你想在服務端跑vue的項目，也就是在遠程端做開發工作，那麼肯定是要安裝node的，畢竟vue開發環境需要node。
基本上服務端也就這兩種需求，node包其實很小，安裝一個也不費事，還可以方便開發，我覺得在遠程端按一個最好。

㈥ 我是個前端，公司讓我搭建伺服器，如何弄

公司讓我搭建伺服器，這個說來也簡單，如果是專業的數據中心託管伺服器，會幫你搭建系統，配置環境。我們的數據中心就是這樣，工程師可以協助用戶搭建環境，上傳應用，都是免費服務。

㈦ 怎麼把VUE項目部署到伺服器上面

1.使用xshell登錄到阿里雲伺服器。安裝nginx（本文安裝到/etc下）

[plain]view plain

• cd/etc

• apt-getupdate

• apt-getinstallnginx

2.首先先配置nginx，然後再根據配置文件做下一步操作

打開/etc/nginx/nginx.conf文件

[plain]view plain

• vim/etc/nginx/nginx.conf

在nginx.conf中配置如下：

[plain]view plain

• 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;

• }

• }

• }

接下來就根據配置文件進行下一步工作。配置文件中的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

• assetsPublicPath:'/test1/',

如果用到了vue-router，則修改/router/index.js

[javascript]view plain

• exportdefaultnewRouter({

• base:'/test1/',//添加這行

• linkActiveClass:'active',

• routes

• });

6.nginx配置文件中的location則是針對跨域處理，表示把對/datas的請求轉發給http://ip:port,本文中這個http://ip:port下就是需要的數據，例如http://ip:port/seller,在本地項目文件中ajax請求數據的地方如下

[javascript]view plain

• consturl='/datas/seller';

• this.$http.get(url).then((response)=>{

• .....

• });

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

• servicenginxstart

9.至此項目部署成功，在瀏覽器下輸入: http://ip/test1/index.html 即可

㈧ web前端項目部署到伺服器：

執行成功後會生成dist文件

4.1 進入到nginx配置目錄：/usr/local/nginx/conf,對 nginx.conf 文件進行配置

使用include可以配置多個.conf文件，如一個項目一個配置文件。在同目錄下創建demo文件夾，並創建demo.conf配置文件

下面使用是以ip地址的方式創建的的配置文件

訪問地址：

其中dist名稱時可以修改，保持與/usr/local/nginx/html下cp名稱一致，否則會訪問不到;並且/usr/local/nginx/html目錄可存在同一ip下多個web項目。

域名與ip綁定

配置域名demo.conf
eg: 域名 - demo.cn

4.2阿里雲配置域名前綴
阿里雲->域名->域名列表—>域名 管理-> 域名解析->解析設置

如圖：記錄值 填寫當前服務ip

學習過程中所記錄，有問題或者有好的方式歡迎指點。不勝感激 🤗 🤗 🤗

㈨ 怎麼把 html 網頁發布在阿里雲伺服器上

我們把網站部署到伺服器的時候，首先把域名解析到伺服器，也就是解析到對應的IP地址，然後要弄清楚伺服器是ESC還是虛擬主機，如果是虛擬主機，那我們就不用配置環境，可以直接上傳代碼到對應的目錄就好，設置一下默認主頁，這個在阿里雲官網的控制台可以進行管理。如果是ESC的話，我們就需要根據伺服器的操作系統進行環境配置，就跟我們本地配置是一樣的操作，然後把代碼上傳到配置的目錄就好。希望能幫到你

㈩ qiankun 微前端應用實踐與部署（四）

一般情況下，我們對應用進行配置打包，要對圖片字體等資源進行下面配置，使得資源路徑正常載入。但是，在微前端模式下，子應用打包部署後，往往會出現子應用 css 文件裡面引入資源路徑載入失敗的問題，下面就讓我們來探究一下。

👉 獨立應用下的 url-loader 配置：

因為 url-loader 的 options 項的屬性 publicPath 屬性默認是 '' ，表示相對路徑，即打包出來的資源引用 url 都會加上相對路徑尋找 static 靜態資源入口，比如：

所有應用編譯打包部署後，當主應用載入子應用，子應用載入自身的 css 文件樣式時，由於 其對應的 css 文件裡面的圖片 url 引用是相對路徑，會出現子應用的資源相對路徑拼接主應用 domain 的情況，即子應用的 ../../static/img/bg_header.790a94f4.png 會在主應用的 domain 下進行資源的尋找，導致載入失敗 404 的情況。

如果項目有用到第三方庫，比如 element-ui ，那麼就更有必要進行處理了。因為 element-ui 的字體圖標是在 css 裡面引入的，還有相關背景圖片的引入也是在 css 里，所以需要配置 webpack 的 url-loader ，生產模式情況下直接指定資源前綴，使之成為絕對路徑。

這樣配置後，打包出來的 css 樣式文件會變成：

資源是絕對路徑，就不會出現上面子應用資源載入失敗的情況。

但是，這種前端配置文件寫死路徑的做法靈活性並不好，比如不能做到編譯一次，任意部署，因為路徑寫死，所以如果需要部署到其他伺服器的話，就需要重新編譯了。

接下來，講的是實現靈活部署的方案。

我們在只編譯打包一次前端應用的前提下，為了實現靈活部署，需要藉助 nginx 來實現。

下面以 vue-cli 3 的配置為例，與 vue-cli 2 只是寫法上的區別，其他都一樣。

假設主應用部署地址是 192.168.2.192 ，子應用的部署地址是 192.168.2.192:7102 。

打包編譯部署後，子應用的 css 文件裡面的圖片資源引用 url 如下：

主應用載入子應用的時候，子應用的資源拼接主應用 domian 後，子應用的 css 文件裡面的圖片資源載入路徑 url 就會變成：

此時的關鍵就是要訪問到子應用的資源，而不是去主應用資源目錄去找。

所以我們採用 nginx 路徑代理轉發埠的方案，當應用訪問 192.168.2.192/live 這個路徑時，經過 nginx 進行路徑代理轉發配置，轉發到子應用埠。

配置 nginx 代理規則：

此時真正訪問的資源路徑（子應用資源路徑）是：

👋 至此，通過修改配置 url-loader 的 publicPath 以及配置 nginx 的路徑代理轉發，就可以實現編譯打包一次，到處部署的目的。