vue配置環境變數伺服器ip

❶ 通俗易懂講解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項目環境變數配置的實現方法

問題
實際開發中，開發環境和生產環境中一些變數是不同的，比如介面地址等等，打包之前需要手動切換。
編譯時
新建env.js
let
baseUrl
=
'';
if(process.env.NODE_ENV
==
'proction'){
baseUrl
=
'https://xxxxxxxxx';
}
else
if
(process.env.NODE_ENV
==
'development')
{
baseUrl
=
'/api'
}
export
{
baseUrl
}
process.env.NODE_ENV
是通過webpack
內置的
DefinePlugin
為所有的依賴定義的變數
webpack.dev.conf.js
new
webpack.DefinePlugin({
'process.env.NODE_ENV':
'development'
}),
webpack.prod.conf.js
new
webpack.DefinePlugin({
'process.env.NODE_ENV':
'proction'
}),
這樣在項目任意文件中都能調用process.env.NODE_ENV變數，本人測試過，process並不是掛載在window變數上，猜測可能是掛載到了node的process變數。
在運行腳本編譯項目的時候，會根據變數值的不同，設置不同的baseUrl。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:vue-cli配置環境變數的方法