當前位置:首頁 » 存儲配置 » 沒網路怎麼配置vue

沒網路怎麼配置vue

發布時間: 2024-06-15 19:57:26

⑴ vue浣跨敤鑻規灉鎵嬫満鑾峰彇涓嶅埌ip鍦板潃

vue浣跨敤鑻規灉鎵嬫満鑾峰彇涓嶅埌ip鍦板潃瑙e喅姝ラゃ
1銆佹墦寮鎵嬫満璁劇疆錛岀偣鍑繪棤綰垮矓鍩熺綉閫夐」榪涘叆銆
2銆佸湪欏甸潰涓閫夋嫨涓涓姝e湪榪炴帴鐨勭綉緇滆繘鍏ャ
3銆佺偣鍑婚〉闈涓嬫柟鐨処P鍦板潃閫夐」銆
4銆佽繘鍏ラ厤緗甀P欏甸潰鍚庯紝鍕鵑夎嚜鍔ㄩ夐」錛屼箣鍚庣偣鍑誨彸涓婅掔殑瀛樺偍閫夐」淇濆瓨閰嶇疆鍗沖彲銆

⑵ 通俗易懂講解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

熱點內容
qq為什麼密碼修改好了就進不去 發布:2024-11-26 11:37:05 瀏覽:382
電容為啥耐壓越大存儲量越小 發布:2024-11-26 11:31:52 瀏覽:189
天然氣車載儲氣瓶泄露處置腳本 發布:2024-11-26 11:17:36 瀏覽:254
換ip的伺服器 發布:2024-11-26 11:17:29 瀏覽:75
容器平台怎麼看配置 發布:2024-11-26 11:06:09 瀏覽:940
qq的xml源碼 發布:2024-11-26 11:04:05 瀏覽:704
ip設計緩存設置 發布:2024-11-26 10:56:49 瀏覽:107
c語言k值 發布:2024-11-26 10:48:53 瀏覽:870
Java霸王大陸 發布:2024-11-26 10:44:52 瀏覽:704
樂高機器人怎麼編程 發布:2024-11-26 10:36:12 瀏覽:374