vue如何配置伺服器地址
㈠ 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項目部署到伺服器上面
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項目如何部署到伺服器
第一步配置 vue.config.js
第二步修改路由，改為 hash模式
第三步文件打包,執行以下，目錄中會出現一個dist文件夾，將文件拖到伺服器的 root 文件夾中
第四步可以通過域名進行訪問 http://www.linlin.run/my-project/index.html#/home
㈣ 通俗易懂講解vue.config.js的配置參數
貼上 官網
vue-cli3 創建的時候並不會自動創建vue.config.js，因為這個是個可選項，所以一般都是需要修改webpack的時候才會自己創建一個vue.config.js
再然後因為vue-cli3內部高度集成了webpack，一般來說使用者不需要再去知道weboack做了什麼，所以沒有暴露webpack的配置文件，我們可以手動去創建vue.config.js 去修改默認的webpack。注意，只能叫vue.config.js。
publicPath （從 Vue CLI 3.3 起已棄用baseUrl，請使用publicPath）
參考： https://my.oschina.net/u/4446873/blog/4882847
默認情況下，Vue CLI 會假設你的應用是被部署在一個域名的根路徑上，例如 https://www.xxx.com/ 。如果應用被部署在一個子路徑上，你就需要用這個選項指定這個子路徑。例如，如果你的應用被部署在 https://www.xxx.com/my-app/ ，則設置 publicPath 為 /my-app/。
這個值在開發環境下同樣生效。如果你想把 開發伺服器架設在根路徑 ，你可以使用一個條件式的值：
通常開發環境，本地運行都會直接部署在根路徑上，publicPath設置為'/'，訪問地址是你的IP地址。如下是設置成'/app'的效果：
從上面可以得知，靜態資源文件都是在app下的，所以在dist下新增添一個app目錄，把dist下文件放到app下，相當於一個文件的路徑，可以發現項目會正常啟動。一般nginx都會配置一個靜態資源目錄，打包後的文件都會放到這個靜態資源目錄裡面，nginx去做映射，所以publicPath這個屬性基本不用改。'/'就行。
結論： publicPath配置成'/aaa/bbb/ccc'， 則需在相應的伺服器路徑中新建aaa>bbb>ccc的文件夾，然後將打包後的文件放進去，就ok啦。
項目中，我會在.env.proction文件中設置一個變數VUE_APP_BASE_URL ，項目打包後告訴相關人員 nginx 路由前綴是什麼即可
outputDir
assetsDir
indexPath
filenameHashing
直觀效果：當運行npm run build時，
打包後的文件後面都會帶一個8位的hash值，那啥是個hash值？
在打包出來的文件名上加上文件內容的hash是目前最常見的有效使用瀏覽器長緩存的方法，js文件如果有內容更新，hash就會更新，瀏覽器請求路徑變化所以更新緩存，如果js內容不變，hash不變，直接用緩存。（這段話是從別的文章裡面參考的）。
將filenameHashing這個值設置為false試試，就不會帶那個後綴hash值。
pages
lintOnSave
runtimeCompiler
transpileDependencies
proctionSourceMap
crossorigin （不理解）
integrity
configureWebpack
chainWebpack
Css相關配置
devServer
如果你的前端應用和後端 API 伺服器沒有運行在同一個主機上，你需要在開發環境下將 API 請求代理到 API 伺服器。這個問題可以通過 vue.config.js 中的 devServer.proxy 選項來配置。
補充知識
所謂的跨域就是不同源，不滿足協議、域名、埠都相同的約定
http://www.test.com/dir/login.html 同源
https://www.test.com/index.html 不同源 協議不同(https)
http://www.test.com:90/index.html 不同源 埠不同(90)
http://www.demo.com/index.html 不同源 域名不同(demo)
當協議、域名、埠中任意一個不相同時，就是不同源。若不同源之間相互請求資源，就算作跨域
補充知識
反向代理（Reverse Proxy）方式是指以代理伺服器來接受網路上的連接請求，然後將請求轉發給內部網路上的伺服器，並將伺服器上得到的結果返回給請求連接的客戶端，此時代理伺服器對外就表現為一個反向代理伺服器。客戶端無需做任何配置。
修改config/index.js /vue.config.js文件（改完之後千萬記得要重新 npm run dev）
host 將他的值修改為 0.0.0.0，代表可以訪問本機所有的IP地址，讓vue項目可通過localhost和IP同時訪問。
port 設置埠號
open 是否在第一次編譯時是自動打開瀏覽器
hot 開啟為true，啟動熱重載，自動刷新頁面
https
inline
overlay
targe 代理的伺服器，也就是api要訪問的伺服器。
changeOrigin 允許跨域， 為false時，請求頭中host仍然是瀏覽器發送過來的host;如果設置成true：發送請求頭中host會設置成target的值
ws 是否代理websocket
pathRewrite 重寫 url 的 path 部分
此文記錄下來，方便自己遺忘的時候能夠快速查閱，如有錯誤請指出。
參考鏈接：
https://www.jianshu.com/p/b358a91bdf2d
https://www.jb51.net/article/174200.htm
https://blog.csdn.net/liu_yunzhao/article/details/90520028
這篇文章講的也很詳細 https://blog.csdn.net/guozhangqiang/article/details/87197870
㈤ vue-cli-service關於 output路徑設置+服務埠設置
用vue cli創建一個項目
Inside a Vue CLI project, @vue/cli-service installs a binary named vue-cli-service . You can access the binary directly as vue-cli-service in npm scripts, or as **./node_moles/.bin/vue-cli-service **from the terminal.
這里如果我們運行 npm run serve, 實際上運行的就是 vue-cli-service serve
這個源碼我們可以在**./node_moles/.bin/vue-cli-service **打開查看
這里我們可以看到運行的過程：
我們可以了解到val的值是
可看到一個service的服務運行，而這個service實際上是：
這是一個類Service的實例對象，而這個類Service的位置在：
@vue > cli-service下文件夾lib下的Service.js文件：
對應的設置publicPath,outputDir.... 設置在
@vue > cli-service下文件夾lib下options.js文件中
伺服器埠設置文件：
@vue > cli-service > lib > commands文件夾下的serve.js文件：
㈥ vue如何將項目部署到伺服器上並且使外網能夠訪問到
你的伺服器是什麼系統啊 ，，，linux LINUX、WINDOWS、NETWARE、UNIX。。
在linux
首先伺服器安裝node git nginx vue-cli
安裝好nginx 用你的公網ip訪問就可以看到 下面的頁面
這就可以了
還有 用express 部署這個 簡單些
㈦ 通過配置文件實現修改vue域名
我們的前端項目一般在打包時就會將伺服器域名或者ip配置好，在打包生成的文件直接部署到對應伺服器就行了。但是公司的項目要求可以部署私有雲或者區域網內，項目的ip地址可能是動態變化的，或者說不同的區域網內ip不是不同的，因此要實現可以讓工程人員去修改訪問的伺服器ip來做到一次打包多處使用的效果。
當然，這樣做在我們看來是有一定風險的，會暴露出一些東西，存在一定的危險，同樣也提供了一定的便捷性（說白了就是，如果不這樣實現，現場售後服務人員會罵娘，因為每個項目都要打包一次，領導呢會感覺，『 你個垃圾，就這都不能實現，怎麼可能，解釋那麼多，不就是做不出來，垃圾 』）。
綜上，我這里對公司項目進行了相關實現，其實挺簡單的，如下：
1，在根目錄下的public目錄中添加config.js文件，內容如下：
項目打包的時候會將該文件拷貝到打包文件的根目錄中。
2，配置封裝的axios，我的axios封裝在request.js文件中，這里我節選了需要添加和修改的地方
3，將config.js文件在index.html文件中引入
㈧ vue設置代理
這里的vue代理是 vue靜態伺服器做代理。使用的是 http-proxy-middleware 這個模塊（這個模塊相當於是node.js的一個插件）。
我的 api='/rng'
我的請求地址 ${api}/xxxx/xxx ，請求地址就為 '/rng/xxxx/xxx'
當node伺服器 遇到 以 '/rng' 開頭的請求 ，就會把 target 欄位加上，那麼我的請求地址就為 http://45.105.124.130:8081/rng/xxxx/xxx
下面的 pathRewrite 表示的意思是 把 /rng 替換為 空，那麼我的請求地址就為 http://45.105.124.130:8081/xxxx/xxx （用在如果你的實際請求地址沒有 rng 的情況）
㈨ 《vue》設置代理伺服器devServer 的 proxy
在開發環境，vue-cli 會幫我們創建一個開發伺服器( http://localhost:8080 )，因此，我們請求後端伺服器的時候，可能會出現跨域問題，因為跨域的三要素：域名、埠、協議其一不同。
完整的請求地址：
我的這個地址，裡面本身就攜帶有 api 欄位的
利用 vue-cli 中的 devServer 配置
記住，如果你的地址沒有類似我那個地址那樣，有個 api 作為標識的，你可以手動在地址上加上一些標識，然後利用 pathRewrite 再抹掉即可。
一般不會這么做，這樣做意義也不大。因為這么做的話，不單單ajax請求都用的遠程，連js、css、圖片等其他資源都是遠程返回的。。。
用了這個方法，在開發階段，就不用設置 axios 中的 baseUrl 了，或者這樣設置：
然後開發階段，你的一些ajax的請求的 url 就會匹配到 /api 開頭，設置 proxy了
千萬不要這么設置：
看似匹配到了，實際上沒有生效。。。（我也不知道為什麼，知道的同學說一下）
實際上，這里是看不到的。。
因為，F12 這里的這個請求，實際上是發給了 本地的臨時伺服器，再由本地的伺服器發送給遠程伺服器。
可以這么理解：本地伺服器將F12的這個請求攔截了，然後自己偷偷改掉 url，再請求的遠程伺服器。
正因為本地伺服器脫離瀏覽器的束縛，解決了跨域問題！