最近看见很多人在搞vue代理，作为实践派的我也来亲手尝试，首先去寻找相关文章，vue代理靠的是node的一个组件。那就直接用开发环境开干。首先百度一下node的服务器搭建，发现是直接写命令调用node的库。这和记忆中的运行有些出入，回想一下一起看见的一些错误，是端口被占用，那么应该是编译js后就直接运行服务器的。再去百度一下vue server，看见文章使用的是webpack 命令中运行server了，那估计就是webpack已经封装了一个静态服务器命令了。但我现在的测试开发项目是用vue cli构建的，这个不合适。再百度一下。这次去到vue cli service官网看，哦，同样有server，还有相关参数，“vue-cli-service serve 命令会启动一个开发服务器 (基于 webpack-dev-server) 并附带开箱即用的模块热重载 (Hot-Module-Replacement)。”，可以可以原来是在别人的基础上再利用，马上在项目根目录执行一波命令。我这里是windows，linux不熟就没搞。
vue-cli-service serve --port 8123
一跑，再次展示我无知的时候。
理论上是放package.json文件中的。打开package.json，我去，原来已经写了serve的，只是我没调用而已，现在加上个指定端口，执行真正的命令
npm run serve
8080端口，我擦，不对呀，难道我的端口没写正确？再看文档，
这是默认值了，我指定的8123没生效。那就应该不是写在命令行（后面发现是我自己没保存文件-_-），而是配置文件了。再认真看了下文档，“除了通过命令行参数，你也可以使用 vue.config.js 里的 devServer 字段配置开发服务器”。那删掉package.json中刚刚添加的参数，再去config中设置下。
//vue.config.js
module.exports = {
publicPath: './' ,
devServer:{
port: 8123
}
}; 再重新构建和运行服务器。
这样就符合我的想法了。访问127.0.0.1:8123看看。
一切正常，现在就可以进行下一步，代理了。根据官方文档指引，再在config上修改下。
//vue.config.js
module.exports = {
publicPath: './' ,
devServer:{
port: 8123,
proxy: {
'/api': {
target: 'http://127.0.0.1/api/',
ws: true,
changeOrigin: true
}
}
}
}; 我的开发环境80端口是IIS使用了，在目录下api/data.json文件用作测试代理请求。那么再在项目上添加一个请求的方法。不过作为一个只用过JQ的人，vue里面不想用原生js发送异步请求还是要百度一下。先引入axios。
npm install axios -S
添加请求，写法和JQ的ajax差不多。
//main.js
...
import axios from 'axios';
...
new Vue({
render: h => h(App),
router:router, //增加router对象
store:store, //增加store对象
axios:axios //增加axios
}).$mount('#app');//app.vue
<template>
<div id="app">
<div>这是计数{{count}}</div>
<p>
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld ref="hw" msg="Welcome to Your Vue.js App" :studyInfo="studyInfo" :question="question" :checkstr="checkstr" @update:checkstr="checkstr = $event"/>
<div>
<div>这里是父控件 </div>
<div>checkstr:{{checkstr}}</div>
</div>
<!-- 增加部分 -->
<input type="button" value="代理测试" @click="btC" />
<!-- 结束增加部分 -->
</div>
</template>
<script>
"use strict"
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
},
data(){
return {
count:this.$store.state.count, //赋予计数器的值
//增加3个变量
allquestionlist:{
"page_1":[{
content:[
{id:1,check:true},
{id:2,check:false},
{id:3,check:false}
]
}]
},
studyInfo:{
now_page:1
},
question:{
index:0,
content:[
{id:1,name:"选项1"},
{id:2,name:"选项2"},
{id:3,name:"选项3"}
]
},
checkstr:'未选中'
};
},
methods:{
btC(){
//测试请求
this.axios({
method:"GET",
url:"/api/data.json"
}).then(function(res){
console.log(res);
});
}
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>开启了serve，我保存文件就自动重新编译了。同时网页也自动刷新了，开启控制台，点点按钮。
貌似写错了请求，修改一下
//app.vue
this.axios.get({
url:"/api/data.json"
}).then(function(res){
console.log(res);
});
还是出错，axios是空对象，去调下bug。去axios的官网一看，还需要引入vue-axios。或者在需要的vue页面中直接import。我就选择每个页面都import一次，那么，删除main.js添加的内容，app.vue增加imoprt。
//main.js
...
//import axios from 'axios';
...
new Vue({
render: h => h(App),
router:router, //增加router对象
store:store, //增加store对象
//axios:axios //增加axios
}).$mount('#app');//app.vue import HelloWorld from './components/HelloWorld.vue'; import axios from 'axios';//在helloworld后面追加一行引入。
再次点击按钮。
看来请求语句还是写错了。原来用get就第一个参数是地址，第二个参数是请求的额外参数，还是按第一次写的，请求方法放在参数里面
axios({
method:"GET",
url:"/api/data.json"
}).then(function(res){
console.log(res);
});
请求路径对了，但是返回404，这就需要去看看代理了。需要往代理增加日志方便查找问题。修改config文件。
//vue.config.js
module.exports = {
publicPath: './' ,
devServer:{
port: 8123,
proxy: {
'/api': {
target: 'http://127.0.0.1',
ws: true,
changeOrigin: true,
logLevel:"debug"
}
}
}
}; 重启
请求正常了，目测修改src里面的文件会自动重新编译，但修改外面的文件需要重启服务器。
