Vue 2.0前端生產環境發佈配置實戰篇

前言

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

當咱們剛接觸vue的時候，特別是對於第一次用前端框架的同窗來講，心情能夠說是比較激動的，框架帶來的種種新體驗，是之前jQuery沒法給你的興奮和知足感。可是在體驗了幾個demo的新鮮感以後，咱們就要考慮如何把框架結合到咱們實際的開發中如何應用的問題了。

下面我主要總結三個和生產發佈相關的問題：資源文件發佈文件夾配置，圖片文件的引用，以及後臺接口調試方法。

一，資源文件發佈配置

通常項目都是用vue-cli腳手架搭建項目，而後編寫本身的代碼。vue-cli腳手架生成的配置，默認資源文件都在static文件夾下面，build發佈的js和css文件也是在static文件夾下面，index.html文件則是和static造成相對路徑關係。

而實際咱們的生產發佈環境中，頁面文件和資源文件不必定在同一目錄下，頁面文件和js,css文件也不在同一目錄下。

以php的Yii2環境爲例，頁面文件通常都放在views文件夾，頁面訪問路徑多是 「http://xxxx.com/index.php/sal...」 這樣的url形式。而js,css,image等資源文件則須要放在web文件夾下，訪問路徑則是從根目錄開始訪問的。若是在web目錄下新建static文件夾，訪問路徑是 「http://xxxx.com/static/images...」 這樣的url形式。實際開發中咱們不能把全部項目資源文件都放在web目錄下的static文件夾，須要按項目新建不一樣的文件夾，在每一個項目文件夾裏再新建js,css,images等文件夾來安放各自的資源文件，訪問路徑應該是 「http://xxxx.com/sales-task/im...」 這樣的url形式。

所以修改配置文件以下：

1. 把vue項目下的static文件夾名稱改爲項目名稱，名稱由小寫英文字母，橫槓鏈接符「-」，數字組成，例如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. 上線前發佈最終線上文件時，config/index.js裏的build設置屬性productionSourceMap: false,同時註釋掉devtool: '#source-map',以免產生.map映射文件。正式上線前這個仍是要保留的，不然調試代碼會很不方便。

二，圖片文件的引用方式

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

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

這樣在開發模式和發佈模式下都能正常引用到圖片，好處是和正常html代碼格式同樣，方便代碼的編寫和修改。缺點是圖片文件地址是靜態的，替換圖片後若是不手動更換文件名沒法解決緩存問題。

另外一種方法就是更科學的模塊化方式，用require引用圖片，這樣發佈後圖片文件名也會生成惟一識別碼，圖片修改後就會從新生成不一樣的文件名，從而能避免緩存問題，另外小圖片還能夠直接生成base64碼，減小文件請求。require引用也有兩種形式，直接寫在:src屬性上（注意這裏和靜態引用不同，不是src而是:src了）：

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

或者把圖片引用數據寫在data綁定數據裏：

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

固然我仍是推薦綁定數據的方法，代碼看起來更清爽，也便於維護。

另外須要說明的是在vue的<style></style>塊內的樣式裏定義的background-image引用圖片不須要require引用，直接經過相對路徑引入就能夠實現上面相同的效果。

三，後臺接口調試方法

這裏後臺接口調試指的是在開發模式下的調試。

vue的開發模式是經過webpack-dev-server啓動一個本地服務，因此在開發模式下調用後臺接口就產生了跨域問題。這裏要說明一下，若是要調用的後臺接口自己就是跨域的接口，也就是說頁面和接口文件不在同一個域名下，跨域問題須要在後端設置，這時其實vue項目不須要特殊配置了，由於本地訪問和發佈後訪問都是跨域的，解決後端跨域就都解決了。因此咱們這裏要配置的，仍是針對發佈之後頁面和接口不存在跨越問題，只是開發模式下本地服務和接口產生的跨越問題，如何解決。

首先仍是打開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"）要保持一致。
例如實際要調用的接口地址是：http://xxxxx.com/sales-task-a... ,通過這樣配置設置後，咱們在vue中就能夠經過 "/sales-task-api/get-user-list" 這樣的地址調用，也不會產生跨域問題。同時由於是採用的根目錄訪問路徑，在生產發佈之後也不會產生接口訪問路徑錯誤問題。