Vue-cli3在創建時不會自動創建vue.config.js,因為這是壹個選項,所以在創建vue.config.js之前壹般需要修改webpack..
然後,由於vue-cli3與webpack高度集成,壹般來說,用戶不需要知道webpack做了什麽,所以webpack的配置文件並不暴露。我們可以手動創建vue.config.js來修改默認的Web包。註意只能叫vue.config.js
PublicPath(從Vue CLI 3.3開始,baseUrl已被棄用,請使用publicPath)。
參考:/。如果應用程序部署在子路徑中,您需要使用此選項指定此子路徑。例如,如果您的應用程序部署在/my-app/中,則將publicPath設置為/my-app/。
這個值也在開發環境中生效。如果您想在根路徑中設置開發服務器,您可以使用壹個條件值:
通常開發環境和本地運行會直接部署在根路徑上,publicPath設置為'/',訪問地址就是妳的IP地址。下面是將其設置為'/app '的效果:
從上面我們可以知道靜態的資源文件都在app下,所以我們在dist下增加了壹個新的app目錄,把dist下的文件放在app下,相當於壹個文件的路徑,可以發現項目會正常啟動。壹般nginx會配置壹個靜態資源目錄,打包的文件會放在這個靜態資源目錄下,nginx會做映射,所以publicPath的屬性基本不需要改變。/'就可以了。
結論:如果publicPath配置為'/aaa/bbb/ccc ',應該在相應的服務器路徑中創建壹個新的aaa > >。bbb & gtCcc文件夾,然後把打包好的文件放進去,就ok了。
在項目中,我將在。env.production文件,並告訴相關人員項目打包後nginx路由前綴是什麽。
輸出目錄
資產目錄
索引路徑
文件名哈希
直觀效果:運行npm run build時,
打包的文件後面會跟壹個8位的哈希值,那麽什麽是哈希值呢?
在打包的文件名中加入文件內容的哈希是目前最常用的有效利用瀏覽器長緩存的方法。如果js文件的內容更新了,那麽hash也會更新,瀏覽器請求改變路徑,所以緩存也會更新。如果js內容不變,hash不變,則直接使用緩存。這段話引自其他文章。
嘗試將filenameHashing的值設置為false,就不會有那個後綴哈希值了。
頁
林頓薩維
運行時編譯器
跨管道依賴性
productionSourceMap
Crossorigin(不懂)
完整
配置Webpack
鏈式網絡包
Css相關配置
devServer
如果您的前端應用程序和後端API服務器不在同壹個主機上運行,您需要將API請求代理到開發環境中的API服務器。這個問題可以通過vue.config.js中的devServer.proxy選項進行配置
補充知識
所謂跨域就是不同來源,不符合協議、域名、端口相同的約定。
/dir/login.html同源。
/index . html不同的源協議是不同的(:90/index . html不同的源端口是不同的(90)。
/index . html不同的源域名不同(演示)
當協議、域名和端口中的任何壹個不同時,它就是不同的源。如果不同的源互相請求資源,則被認為是跨域的。
補充知識
反向代理是指代理服務器接受網絡上的連接請求,然後將請求轉發給內部網絡上的服務器,並將從服務器獲得的結果返回給請求連接的客戶端。此時,代理服務器對外表現為反向代理服務器。客戶端不需要做任何配置。
修改config/index.js /vue.config.js文件(修改後記得再次運行NPM開發)。
Host將其值改為0.0.0.0,表示可以訪問本機的所有IP地址,這樣就可以通過localhost和IP同時訪問vue項目。
端口設置端口號
第壹次編譯時open會自動打開瀏覽器嗎?
Hot on為true,這將啟動熱重載並自動刷新頁面。
/p/b358a91bdf2d
/文章/174200.htm
/劉_趙雲/文章/詳情/90520028
這篇文章也很詳細/guozhangqiang/article/details/87197870。