溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

怎么在vue項(xiàng)目中打包部署_nginx代理訪問(wèn)

發(fā)布時(shí)間：2021-05-20 16:07:20 來(lái)源：億速云 閱讀：192 作者：Leah 欄目：web開(kāi)發(fā)

怎么在vue項(xiàng)目中打包部署_nginx代理訪問(wèn)？很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來(lái)學(xué)習(xí)下，希望你能有所收獲。

1、先看vue項(xiàng)目打包（我這里使用的是vscode開(kāi)發(fā)工具）

這里是我的項(xiàng)目結(jié)構(gòu)：

怎么在vue項(xiàng)目中打包部署_nginx代理訪問(wèn)

打包之前需要修改如下配置文件：

配置文件一：build>>utils.js (修改publicPath:"../../" , 這樣寫(xiě)是處理打包后找不到靜態(tài)文件的問(wèn)題)

怎么在vue項(xiàng)目中打包部署_nginx代理訪問(wèn)

配置文件二：config>>index.js(修改assetsPublicPath:'./' ,修改目的是為了解決js找不到的問(wèn)題)

怎么在vue項(xiàng)目中打包部署_nginx代理訪問(wèn)

上面兩步修改完成之后就可以進(jìn)行打包了

在控制臺(tái)終端輸入npm run build

怎么在vue項(xiàng)目中打包部署_nginx代理訪問(wèn)

坐等打包

打包完成之后項(xiàng)目中會(huì)生成一個(gè)dist文件夾，直接訪問(wèn)里面的index.html就ok了

怎么在vue項(xiàng)目中打包部署_nginx代理訪問(wèn)

我這里有點(diǎn)特殊的地方，需要修改下index.html文件，是因?yàn)樽约杭拥囊粋€(gè)moment.js

怎么在vue項(xiàng)目中打包部署_nginx代理訪問(wèn)

ok，到這里打包的事情完成了，下面就放到服務(wù)器上去了

我這里使用的windows版本的nginx做演示，linux的不做講解了，還有nginx的下載安裝也不做講解，直接看配置：

怎么在vue項(xiàng)目中打包部署_nginx代理訪問(wèn)

為什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創(chuàng)建可維護(hù)性和可測(cè)試性更強(qiáng)的代碼庫(kù)，Vue允許可以將一個(gè)網(wǎng)頁(yè)分割成可復(fù)用的組件，每個(gè)組件都包含屬于自己的HTML、CSS、JavaScript，以用來(lái)渲染網(wǎng)頁(yè)中相應(yīng)的地方，所以越來(lái)越多的前端開(kāi)發(fā)者使用vue。

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝您對(duì)億速云的支持。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手