1. 建立一個Vue項目
vue init webpack appname
2. 設置編譯結果目錄
a. 修改/config/index
下的exports.build.index
值爲主html文件的路徑。
b. 修改/config/index
下的exports.build.assetsRoot
值爲靜態資源文件夾的路徑(一般爲項目的public目錄)。
c. 修改/config/index
下的exports.build.assetsSubDictionary
值爲靜態資源文件夾下子目錄名。
3*. 關閉產品環境下的SourceMap生成
修改/config/index
下的exports.build.productionSourceMap
爲false
。
SourceMap
有助於查看代碼錯誤的實際位置,但在產品環境可以去除。
4. 設置代理
修改config/index
下的exports.build.proxyTable
如下格式:
{
'/api': {
target: 'http://localhost:10086',
pathRewrite: {
'^/api': '/api'
}
}
}
5. 安裝axios
a. npm i -S axios
b. 在/src/main.js
中配置如下:
import axios from 'axios'
Vue.prototype.$http = axios
即可在methods中如下調用:
this.$http({
method: 'post',
url: '/addUser',
data: {
name: 'xiaoming',
age: '12'
}
}).then(function(res){
// deal with res
})