詳解Vue前端生產環境發布配置實戰篇
前言
首先這篇文章是寫給Vue新手的，老司機基本不用看了。
當我們剛接觸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/sales-task/create ” 這樣的url形式。而js,css,image等資源文件則需要放在web文件夾下，訪問路徑則是從根目錄開始訪問的。如果在web目錄下新建static文件夾，訪問路徑是 “http://freelancer-xxxx.s3-website-us-east-1.amazonaws.com/index.html” 這樣的url形式。實際開發中我們不能把所有項目資源文件都放在web目錄下的static文件夾，需要按項目新建不同的文件夾，在每個項目文件夾裏再新建js,css,images等文件夾來安放各自的資源文件，訪問路徑應該是 “http://freelancer-xxxx.s3-website-us-east-1.amazonaws.com/index.html ” 這樣的url形式。
因此修改配置文件如下：
- 把vue項目下的static文件夾名稱改成項目名稱，名稱由小寫英文字母，橫杠連接符“-”，數字組成，例如sales-task。
- 修改config/index.js，把dev和build屬性裏的assetsSubDirectorys的值都改成項目名稱，例如sales-task。build的assetsPublicPath值改成“/”，這樣所有資源文件的引用都從根目錄引用，避免相對路徑錯誤。
- 修改build/webpack.dev.conf.js，把plugins的new CopyWebpackPlugin那裏的from: path.resolve(__dirname, ‘../static‘)，改為from: path.resolve(__dirname, ‘../sales-task‘)。
- build/webpack.prod.conf.js裏也做同樣的修改。
- 上線前發布最終線上文件時，config/index.js裏的build設置屬性productionSourceMap: false,同時註釋掉devtool: ‘#source-map‘,以避免產生.map映射文件。正式上線前這個還是要保留的，否則調試代碼會很不方便。
二，圖片文件的引用方式
vue項目中有2種圖片引用方式，一種是靜態引用，按照我們上面的資源文件夾配置，圖片路徑直接寫到template的html代碼裏，格式示例：
?| 1 |
<img src="/sales-task/images/logo.png">
|
這樣在開發模式和發布模式下都能正常引用到圖片，好處是和正常html代碼格式一樣，方便代碼的編寫和修改。缺點是圖片文件地址是靜態的，替換圖片後如果不手動更換文件名無法解決緩存問題。
另一種方法就是更科學的模塊化方式，用require引用圖片，這樣發布後圖片文件名也會生成唯一識別碼，圖片修改後就會重新生成不同的文件名，從而能避免緩存問題，另外小圖片還可以直接生成base64碼，減少文件請求。require引用也有兩種形式，直接寫在:src屬性上（註意這裏和靜態引用不一樣，不是src而是:src了）：
?| 1 |
<img :src="require(‘../assets/images/logo.png‘)">
|
或者把圖片引用數據寫在data綁定數據裏：
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 |
<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，默認是空的，我們要按照我們的接口路徑，修改如下：
?| 1 2 3 4 5 6 7 |
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-api/get-user-list ,經過這樣配置設置後，我們在vue中就可以通過 "/sales-task-api/get-user-list" 這樣的地址調用，也不會產生跨域問題。同時因為是采用的根目錄訪問路徑，在生產發布以後也不會產生接口訪問路徑錯誤問題。
下一頁 »
詳解Vue前端生產環境發布配置實戰篇