前言

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

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

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

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

一般項目都是用vue-cli腳手架搭建項目，然后編寫自己的代碼。vue-cli腳手架生成的配置，默認(rèn)資源文件都在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形式。

因此修改配置文件如下：

把vue項目下的static文件夾名稱改成項目名稱，名稱由小寫英文字母，橫杠連接符“-”，數(shù)字組成，例如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里也做同樣的修改。 上線前發(fā)布最終線上文件時，config/index.js里的build設(shè)置屬性productionSourceMap: false,同時注釋掉devtool: '#source-map',以避免產(chǎn)生.map映射文件。正式上線前這個還是要保留的，否則調(diào)試代碼會很不方便。

二，圖片文件的引用方式

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