1接口地址 http://film.glkjjt.com/api/Movie/New 这个地址直接放在浏览器中能运行
2在main.js中的代码
import Vue from "vue";
import App from "./App";
import router from "./router";
import axios from "axios";
Vue.prototype.$http = axios;
axios.defaults.baseURL = "http://film.glkjjt.com/api";
Vue.config.productionTip = false;
new Vue({
el: "#app",
router,
components: { App },
template: "<App/>"
});
3.在config中index.js中的代码
"use strict";
const path = require("path");
module.exports = {
dev: {
assetsSubDirectory: "static",
assetsPublicPath: "/",
// 在proxyTable中配置的跨域
proxyTable: {
"/api": {
target: "http://film.glkjjt.com",
changeOrigin: true,
pathRewrite: {
"^/api": ""
}
}
},
host: "localhost",
port: 8080,
autoOpenBrowser: false,
errorOverlay: true,
notifyOnErrors: true,
poll: false,
devtool: "cheap-module-eval-source-map",
cssSourceMap: true
},
build: {
index: path.resolve(__dirname, "../dist/index.html"),
assetsRoot: path.resolve(__dirname, "../dist"),
assetsSubDirectory: "static",
assetsPublicPath: "/",
productionSourceMap: true,
devtool: "#source-map",
productionGzip: false,
productionGzipExtensions: ["js", "css"],
bundleAnalyzerReport: process.env.npm_config_report
}
};
4在components文件夹中HelloWorld.vue中的代码
template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {
msg: "Welcome to Your Vue.js App"
};
},
// 在生命周期里面发请求
created() {
this.$http
.get("api/Movie/New")
.then(response => {
console.log(1);
console.log(response);
})
.catch(error => {
console.log(2);
console.log(error);
});
}
};
</script>
// 接口文档中发这个get请求不需要参数
5 通过npm run dev运行
在浏览器中出现的报错信息
