前端dist如何部署到伺服器

㈠ 怎麼把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 即可

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

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

㈢ 一個前端頁面如何部署

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

㈣ 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服務

㈤ 如何把本地項目部署到伺服器上

把本地項目部署到伺服器上方法比較多，這里以javaee項目為例：

1. 把項目打包成zip，FTP上傳到生產伺服器tomcat的webapps目錄下解壓；

2. 本地修改好的文件，立即FTP上傳到生產伺服器對應的目錄；

3. 生產伺服器安裝svn服務，在本地把修改過的文件commit，然後生產伺服器update。

拓展資料：

伺服器，也稱伺服器，是提供計算服務的設備。由於伺服器需要響應服務請求，並進行處理，因此一般來說伺服器應具備承擔服務並且保障服務的能力。

伺服器的構成包括處理器、硬碟、內存、系統匯流排等，和通用的計算機架構類似，但是由於需要提供高可靠的服務，因此在處理能力、穩定性、可靠性、安全性、可擴展性、可管理性等方面要求較高。

在網路環境下，根據伺服器提供的服務類型不同，分為文件伺服器，資料庫伺服器，應用程序伺服器，WEB伺服器等。

按應用層次劃分通常也稱為「按伺服器檔次劃分」或 「按網路規模」分，是伺服器最為普遍的一種劃分方法，它主要根據伺服器在網路中應用的層次（或伺服器的檔次來）來劃分的。要注意的是這里所指的伺服器檔次並不是按伺服器CPU主頻高低來劃分，而是依據整個伺服器的綜合性能，特別是所採用的一些伺服器專用技術來衡量的。按這種劃分方法，伺服器可分為：入門級伺服器、工作組級伺服器、部門級伺服器、企業級伺服器。

伺服器—網路

㈥ vuejs怎麼在伺服器部署

既然是布署，哪默認就應該是生產環境下的布署，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以後默認引用資源文件的路徑是

有更多疑問 」可以咨詢 」小鳥雲，它是的一家伺服器廠商，我一直在用他們產品！

㈦ 前端的代碼怎麼部署到伺服器

1、安裝護衛神主機大師，一鍵配置全能網站環境
2、用主機大師開設網站，並綁定域名
3、解析域名到伺服器IP
4、FTP上傳前端代碼到伺服器
5、輸入域名即可訪問前端代碼了

㈧ 怎麼把python部署到伺服器

使用pip或easy_install可以管理和安裝python的package包，實際上它們都是從pypi伺服器中搜索和下載package的。目前在pypi伺服器上，有超過三萬多個package，同時還允許我們將自己的代碼也上傳發布到伺服器上。這樣，世界上的所有人都能使用pip或easy_install來下載使用我們的代碼了。

具體步驟如下：

首先創建項目文件和setup文件。

目錄文件結構如下：

project/
simpletest/
__init__.py
test.py
setup.py

假設項目文件只有一個simpletest包，裡面有一個test.py文件。

創建的setup.py文件格式大致如下，其中，install_requires欄位可以列出依賴的包信息，用戶使用pip或easy_install安裝時會自動下載依賴的包。詳細的格式參考文檔。

from setuptools import setup, find_packages

setup(
name = 'simpletest',
version = '0.0.1',
keywords = ('simple', 'test'),
description = 'just a simple test',
license = 'MIT License',
install_requires = ['simplejson>=1.1'],

author = 'yjx',
author_email = '[email protected]',

packages = find_packages(),
platforms = 'any',
)

然後將代碼打包。

打包只需要執行python
setup.py xxx命令即可，其中xxx是打包格式的選項，如下：

# 以下所有生成文件將在當前路徑下 dist 目錄中
python setup.py bdist_egg # 生成easy_install支持的格式
python setup.py sdist # 生成pip支持的格式，下文以此為例

發布到pypi。

發布到pypi首先需要注冊一個賬號，然後進行如下兩步：

注冊package。輸入python setup.py register。
上傳文件。輸入python setup.py sdist upload。

安裝測試

上傳成功後，就可以使用pip來下載安裝了。

另外，pypi還有一個測試伺服器，可以在這個測試伺服器上做測試，測試的時候需要給命令指定額外的"-r"或"-i"選項，如python
setup.py register -r "",python
setup.py sdist upload -r "",pip
install -i "" simpletest。

發布到測試伺服器的時候，建議在linux或cygwin中發布，如果是在windows中，參考文檔，需要生成.pypirc文件

㈨ 前後端分離的前端是怎麼部署到生產環境中的，直接通過 nginx 嗎

front-end-separate(前後端分離腳手架)

front-end-separate
一個前後端分離的腳手架工具（自主研發）
為什麼選擇grunt而不是gulp
如果你也和我一樣喜歡grunt這種配置的方式，那麼我相信這個腳手架覺對十分適合你
所有靜態資源都md5全並壓縮打包,css,js,img,html
已在生產環境驗證
基於express和grunt的前後端分離框架
模板引擎使用的是nunjucks，好處是可以實現模版繼承，又不像jade一樣把html標簽都簡化了
express提供路由服務
項目中app為原代碼文件（開發用），dist為打包後的文件（用於線上）
開發使用app，線上使用dist，支持一鍵cdn部署，加速你的項目
項目啟動時，修改任何express代碼，可以實現自動重啟–基於nodemon
支持sass圖片精靈（自動打包精靈圖片，再也不用手動去拼湊了）
基於grunt md5 打包合並
線上輸出的html已經壓縮成一行（讓你的代碼更有Geeker范）

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

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