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

創(chuàng)新互聯(lián)建站專注于新華網(wǎng)站建設(shè)服務及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。 熱誠為您提供新華營銷型網(wǎng)站建設(shè)，新華網(wǎng)站制作、新華網(wǎng)頁設(shè)計、新華網(wǎng)站官網(wǎng)定制、微信小程序開發(fā)服務，打造新華網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供新華網(wǎng)站排名全網(wǎng)營銷落地服務。

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

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

而實際我們的生產(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形式。實際開發(fā)中我們不能把所有項目資源文件都放在web目錄下的static文件夾，需要按項目新建不同的文件夾，在每個項目文件夾里再新建js,css,images等文件夾來安放各自的資源文件，訪問路徑應該是 “http://freelancer-xxxx.s3-website-us-east-1.amazonaws.com/index.html ” 這樣的url形式。

因此修改配置文件如下：

1. 把vue項目下的static文件夾名稱改成項目名稱，名稱由小寫英文字母，橫杠連接符“-”，數(shù)字組成，例如sales-task。

2. 修改config/index.js，把dev和build屬性里的assetsSubDirectorys的值都改成項目名稱，例如sales-task。build的assetsPublicPath值改成“/”，這樣所有資源文件的引用都從根目錄引用，避免相對路徑錯誤。

3. 修改build/webpack.dev.conf.js，把plugins的new CopyWebpackPlugin那里的from: path.resolve(__dirname, '../static')，改為from: path.resolve(__dirname, '../sales-task')。

4. build/webpack.prod.conf.js里也做同樣的修改。

5. 上線前發(fā)布最終線上文件時，config/index.js里的build設(shè)置屬性productionSourceMap: false,同時注釋掉devtool: '#source-map',以避免產(chǎn)生.map映射文件。正式上線前這個還是要保留的，否則調(diào)試代碼會很不方便。

二，圖片文件的引用方式

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

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

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

另一種方法就是更科學的模塊化方式，用require引用圖片，這樣發(fā)布后圖片文件名也會生成唯一識別碼，圖片修改后就會重新生成不同的文件名，從而能避免緩存問題，另外小圖片還可以直接生成base64碼，減少文件請求。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>

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

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

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

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

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

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

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

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

例如實際要調(diào)用的接口地址是：http://xxxxx.com/sales-task-api/get-user-list ,經(jīng)過這樣配置設(shè)置后，我們在vue中就可以通過 "/sales-task-api/get-user-list" 這樣的地址調(diào)用，也不會產(chǎn)生跨域問題。同時因為是采用的根目錄訪問路徑，在生產(chǎn)發(fā)布以后也不會產(chǎn)生接口訪問路徑錯誤問題。

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

網(wǎng)頁名稱：Vue前端生產(chǎn)環(huán)境發(fā)布配置的示例分析
本文地址：http://jinyejixie.com/article16/gpgcdg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務器托管、微信公眾號、Google、商城網(wǎng)站、自適應網(wǎng)站、網(wǎng)頁設(shè)計公司

廣告

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