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
})