前言

首先這篇文章是寫給Vue新手的，老司機基本不用看了。

當我們剛接觸vue的時候，特別是對于第一次用前端框架的同學(xué)來說，心情可以說是比較激動的，框架帶來的種種新體驗，是以前jQuery無法給你的興奮和滿足感。但是在體驗了幾個demo的新鮮感之后，我們就要考慮如何把框架結(jié)合到我們實際的開發(fā)中如何應(yīng)用的問題了。

下面我主要總結(jié)三個和生產(chǎn)發(fā)布相關(guān)的問題：資源文件發(fā)布文件夾配置，圖片文件的引用，以及后臺接口調(diào)試方法。

一，資源文件發(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等文件夾來安放各自的資源文件，訪問路徑應(yīng)該是 “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)的，替換圖片后如果不手動更換文件名無法解決緩存問題。

另一種方法就是更科學(xué)的模塊化方式，用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啟動一個本地服務(wù)，所以在開發(fā)模式下調(diào)用后臺接口就產(chǎn)生了跨域問題。這里要說明一下，如果要調(diào)用的后臺接口本身就是跨域的接口，也就是說頁面和接口文件不在同一個域名下，跨域問題需要在后端設(shè)置，這時其實vue項目不需要特殊配置了，因為本地訪問和發(fā)布后訪問都是跨域的，解決后端跨域就都解決了。所以我們這里要配置的，還是針對發(fā)布以后頁面和接口不存在跨越問題，只是開發(fā)模式下本地服務(wù)和接口產(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)生接口訪問路徑錯誤問題。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評論