Vue前端生產(chǎn)環(huán)境發(fā)布配置的示例分析-創(chuàng)新互聯(lián)

小編給大家分享一下Vue前端生產(chǎn)環(huán)境發(fā)布配置的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)建站專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都網(wǎng)站制作、成都做網(wǎng)站、建德網(wǎng)絡(luò)推廣、微信平臺(tái)小程序開發(fā)、建德網(wǎng)絡(luò)營銷、建德企業(yè)策劃、建德品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們大的嘉獎(jiǎng)；創(chuàng)新互聯(lián)建站為所有大學(xué)生創(chuàng)業(yè)者提供建德建站搭建服務(wù)，24小時(shí)服務(wù)熱線：18980820575，官方網(wǎng)址：muchs.cn

一，資源文件發(fā)布配置

一般項(xiàng)目都是用vue-cli腳手架搭建項(xiàng)目，然后編寫自己的代碼。vue-cli腳手架生成的配置，默認(rèn)資源文件都在static文件夾下面，build發(fā)布的js和css文件也是在static文件夾下面，index.html文件則是和static形成相對(duì)路徑關(guān)系。

而實(shí)際我們的生產(chǎn)發(fā)布環(huán)境中，頁面文件和資源文件不一定在同一目錄下，頁面文件和js,css文件也不在同一目錄下。

以php的Yii2環(huán)境為例，頁面文件一般都放在views文件夾，頁面訪問路徑可能是 “http://xxxx.com/index.php/sales-task/create ” 這樣的url形式。而js,css,image等資源文件則需要放在web文件夾下，訪問路徑則是從根目錄開始訪問的。如果在web目錄下新建static文件夾，訪問路徑是 “http://freelancer-xxxx.s3-website-us-east-1.amazonaws.com/index.html” 這樣的url形式。實(shí)際開發(fā)中我們不能把所有項(xiàng)目資源文件都放在web目錄下的static文件夾，需要按項(xiàng)目新建不同的文件夾，在每個(gè)項(xiàng)目文件夾里再新建js,css,images等文件夾來安放各自的資源文件，訪問路徑應(yīng)該是 “http://freelancer-xxxx.s3-website-us-east-1.amazonaws.com/index.html ” 這樣的url形式。

因此修改配置文件如下：

把vue項(xiàng)目下的static文件夾名稱改成項(xiàng)目名稱，名稱由小寫英文字母，橫杠連接符“-”，數(shù)字組成，例如sales-task。
修改config/index.js，把dev和build屬性里的assetsSubDirectorys的值都改成項(xiàng)目名稱，例如sales-task。build的assetsPublicPath值改成“/”，這樣所有資源文件的引用都從根目錄引用，避免相對(duì)路徑錯(cuò)誤。
修改build/webpack.dev.conf.js，把plugins的new CopyWebpackPlugin那里的from: path.resolve(__dirname, '../static')，改為from: path.resolve(__dirname, '../sales-task')。
build/webpack.prod.conf.js里也做同樣的修改。
上線前發(fā)布最終線上文件時(shí)，config/index.js里的build設(shè)置屬性productionSourceMap: false,同時(shí)注釋掉devtool: '#source-map',以避免產(chǎn)生.map映射文件。正式上線前這個(gè)還是要保留的，否則調(diào)試代碼會(huì)很不方便。

二，圖片文件的引用方式

vue項(xiàng)目中有2種圖片引用方式，一種是靜態(tài)引用，按照我們上面的資源文件夾配置，圖片路徑直接寫到template的html代碼里，格式示例：

<img src="/sales-task/images/logo.png">

這樣在開發(fā)模式和發(fā)布模式下都能正常引用到圖片，好處是和正常html代碼格式一樣，方便代碼的編寫和修改。缺點(diǎn)是圖片文件地址是靜態(tài)的，替換圖片后如果不手動(dòng)更換文件名無法解決緩存問題。

另一種方法就是更科學(xué)的模塊化方式，用require引用圖片，這樣發(fā)布后圖片文件名也會(huì)生成唯一識(shí)別碼，圖片修改后就會(huì)重新生成不同的文件名，從而能避免緩存問題，另外小圖片還可以直接生成base64碼，減少文件請(qǐng)求。require引用也有兩種形式，直接寫在:src屬性上（注意這里和靜態(tài)引用不一樣，不是src而是:src了）：

<img :src="require('../assets/images/logo.png')">

或者把圖片引用數(shù)據(jù)寫在data綁定數(shù)據(jù)里：

<img :src="logoImg">
...
<script>
export default
 {
  data()
  {
   return {
    logoImg:require('../assets/images/logo.png')
   }
  }
 }
</script>

當(dāng)然我還是推薦綁定數(shù)據(jù)的方法，代碼看起來更清爽，也便于維護(hù)。

另外需要說明的是在vue的<style></style>塊內(nèi)的樣式里定義的background-image引用圖片不需要require引用，直接通過相對(duì)路徑引入就可以實(shí)現(xiàn)上面相同的效果。

三，后臺(tái)接口調(diào)試方法

這里后臺(tái)接口調(diào)試指的是在開發(fā)模式下的調(diào)試。

vue的開發(fā)模式是通過webpack-dev-server啟動(dòng)一個(gè)本地服務(wù)，所以在開發(fā)模式下調(diào)用后臺(tái)接口就產(chǎn)生了跨域問題。這里要說明一下，如果要調(diào)用的后臺(tái)接口本身就是跨域的接口，也就是說頁面和接口文件不在同一個(gè)域名下，跨域問題需要在后端設(shè)置，這時(shí)其實(shí)vue項(xiàng)目不需要特殊配置了，因?yàn)楸镜卦L問和發(fā)布后訪問都是跨域的，解決后端跨域就都解決了。所以我們這里要配置的，還是針對(duì)發(fā)布以后頁面和接口不存在跨越問題，只是開發(fā)模式下本地服務(wù)和接口產(chǎn)生的跨越問題，如何解決。

首先還是打開config/index.js，找到module.exports里的dev，里面有一項(xiàng)proxyTable，默認(rèn)是空的，我們要按照我們的接口路徑，修改如下：

  proxyTable: {
    '/sales-task-api':{
      target:"http://xxxxx.com/sales-task-api",
      changeOrigin:true,
      pathRewrite: {"^/sales-task-api" : "/"} 
    }
  }

注意上面3個(gè)地方的接口路徑名稱（示例中的"sales-task-api"）要保持一致。

例如實(shí)際要調(diào)用的接口地址是：http://xxxxx.com/sales-task-api/get-user-list ,經(jīng)過這樣配置設(shè)置后，我們?cè)趘ue中就可以通過 "/sales-task-api/get-user-list" 這樣的地址調(diào)用，也不會(huì)產(chǎn)生跨域問題。同時(shí)因?yàn)槭遣捎玫母夸浽L問路徑，在生產(chǎn)發(fā)布以后也不會(huì)產(chǎn)生接口訪問路徑錯(cuò)誤問題。

以上是“Vue前端生產(chǎn)環(huán)境發(fā)布配置的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

分享文章：Vue前端生產(chǎn)環(huán)境發(fā)布配置的示例分析-創(chuàng)新互聯(lián)
網(wǎng)站鏈接：http://muchs.cn/article28/deggcp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護(hù)、手機(jī)網(wǎng)站建設(shè)、網(wǎng)站策劃、微信公眾號(hào)、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站排名

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容