vue打包配置伺服器地址

『壹』 vue cli3項目打包部署到tomcat伺服器運行

步驟：
一、找到文件vue.config.js，沒有則自己創建一個

二、編寫vue.config.js的內容

三、修改路由方式，修改為hash，文件位置自己找，vuecli3中在router.ts文件中

四、添加空路由

找到編譯好的文件夾，如果作為獨立項目，直接拷貝後放到Tomcat里即可，如果是放到另外一個項目中使用，則拷貝到其它項目中去

七、適配到EOS中使用
7.1、改變原EOS項目中的首頁配置
在webapps\default\WEB-INF\web.xml中配置

7.2、修改原EOS項目中的登錄成功的跳轉頁，也是項目主頁
在webapps\default\coframe\auth\index.jsp中配置

『貳』 怎麼把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 即可

『叄』 vue配合nginx打包路徑層問題

1、需求是訪問地址增加一層路徑比如：(增加一層路徑為customfile)

之前：http:xxxx/login

要求：http:xxxx/customfile/login  其中filename屬於ng配置時的一層文件夾

解決：

1、vue項目的webpack配置不同版本有區別大致修改的地方為：

assetPublicPath: '/customfile'

或

public: '/customfile'

2、修改router.js路由模式為： {mode:'history', base:'/customfile'}

3、Nginx配置修改：

    location /customfile {

          alias /data/xxxx/xxx/customfile/dist; // 這里是伺服器資源路徑

          try_files $uri $uri/ /customfile/index.html;

          index index.html;

    }

『肆』 Vue本地項目過程隨筆(4) 部署到伺服器

伺服器購買，埠開放不再多講 文件的上傳使用 Xftp 。

工作經歷內容用到的 省略號特效

本地Vue項目打包,生成文件放在Vue項目目錄下的dist文件夾

在阿里雲伺服器控制台內安裝nodejs，埠開放在防火牆選項下

安裝nginx

npm install命令遇到relocation error: npm: symbol SSL_set_cert_cb的報錯問題

改標簽欄icon，以及標簽名

安裝完nginx後 用Xftp登陸伺服器，上傳打包好的項目。

保存，回到伺服器控制台輸入 重新運行nginx

現在可以通過ip地址訪問到打包過的Vue項目了
我的項目鏈接: http://phantomcorner.tech
Github

『伍』 Vue打包並自動部署到指定伺服器

安裝依賴

配置備用環境變數
在根目錄下創建.env.development文件，並添加環境變數

VUE_APP_SERVER_ID = 0

在根目錄下創建.env.proction文件，並添加環境變數

VUE_APP_SERVER_ID = 1

創建自動化部署腳本
在package.json同級目錄下創建文件夾deploy

在deploy文件下創建config.js和servers.js和index.js

servers.js：配置伺服器相關信息

config.js：發布前的一些處理

index.js：發布到伺服器的處理邏輯

添加package.json中的scripts命令

效果如下

『陸』 vue設置代理的時候填的是伺服器地址嗎

vue設置代理的時候填的是伺服器地址。
簡單的只能配置一個代理，不能控制走不走代理。vue.config.js配置

例如: 比如介面地址為/students, pubilc文件里有名為students的文件，代理伺服器則不會將請求轉發到伺服器，會直接將public里名為student的文件里的內容返回。

『柒』 vue項目如何打包上線--筆記

1.第一步

然後會生成一個dist目錄的文件夾
2.將dist文件夾拎出來，我本地已經打好localhost伺服器，使用IIs搭建的，如果想輸入： localhost:8001/project 打開文件，需要在index.js文件配置：

如何讓vue項目然後通過ip地址訪問，需要在package.json配置項加個 --host 0.0.0.0

3.

build/webpack.prod.conf.js

config/index.js

4.重復第一步npm run build
因為這邊我是本地搭建的伺服器，菜菜的我不會寫介面，只能模擬了，我這邊是在伺服器指定文件夾下建了個api文件夾，裡面放對應的json文件，如果是團隊開發，只要把dist文件扔給後端，後端會寫好介面的，嗯就這樣
5.運行結果對比

6.進一步優化
當項目日趨龐大，打包後的app.js會越大，-----非同步組件載入

『捌』 vue項目如何部署到伺服器

第一步配置 vue.config.js

第二步修改路由，改為 hash模式

第三步文件打包,執行以下，目錄中會出現一個dist文件夾，將文件拖到伺服器的 root 文件夾中

第四步可以通過域名進行訪問 http://www.linlin.run/my-project/index.html#/home

『玖』 vue項目打包部署後請求地址及請求問題

1   首先 vue中 是用的axios 發請求,  axios 支持Promise 非常好用,  可以在請求後的.then()中拿到請求回來的數據,像這樣

2    請求方式有很多, 如get post put    get 又稱為 queryParams 所以攜帶參數後看發的請求是拼串的,像這樣

        寫的時候你可以採取拼串的寫法 像   'page = ' + page + '&size=『size 這種寫法,但這種寫法過於死板, 當後台要求你穿的參數 是有值時就傳 沒值時不傳 這樣就不可以了 因為就算做收集的表單沒有數據,也會傳一個key過去,這樣到後台 後台就會收到一個空值 , 這時候你可以用get請求的另一種方式   params, 這種寫法相對靈活 寫起來也比較簡便 像這樣

        但當你被要求沒值時不傳 你就要做一些處理了  比如 把所有要傳得數據都放在一個對象中,在發請求前對象做一下處理 刪掉沒有值得那條屬性 比如這樣

3   還有就是 發請求的問題了   因為在開發的時候會有跨域問題,我們一般為了方便都會 配置一個代理proxyTable, 但是在打包部署後在伺服器上會有問題   因為伺服器上沒有跨域 請求地址會錯, 但是像我上篇帖子中說的那樣  每一次打包前都 把請求地址改為伺服器地址 那樣又很麻煩, 所以我是這么做的，

我在config/dev.en.js中配置了一下 像這樣

在config/prod.env.js中這樣配置

在組件中發請求時這樣寫

我認為這樣還是比較好用的   如果那裡除了問題你需要在 調試工具的network中查看請求地址 看是不是正確 ，不正確改就行了

                這些都是比較基礎的,但很實用,希望可以幫到你們

『拾』 vue項目部署iis伺服器

一、將vue項目進行打包編譯後，根目錄生成dist的文件

當出現如上圖顯示時，說明打包編譯完成，已經生成dist文件

二、打開iis伺服器
打開iis伺服器後選中【網站】後右擊選【添加網站】，就可對網站進行配置，物理路徑選擇編譯後的dist文件夾後選確定就行。

三、右擊選擇【啟動】後出現如下報錯信息：
除非Windows Activation Service (WAS)和萬維網發布服務(W3SVC)均處於運行狀態，否則無法啟動網站

解決：
打開命令提示符中輸入services.msc ,打開服務。
找到windows install及word wide web發布服務選項，分別右擊啟動，並右鍵屬性改為啟動類型就可以。

這是重新啟動下，就可以訪問。