参考资料: Vue-CLI 3.x 跨域问题处理
使用代理设置:见官方文档
配置代理
- 新建配置文件
在 package.json 文件的同级目录下创建 vue.config.js 文件,文件的格式应该为:\
// vue.config.js
module.exports = {
// 选项...
}
- 基础配置:
module.exports = {
outputDir: 'dist', //build输出目录
assetsDir: 'assets', //静态资源目录(js, css, img)
lintOnSave: false, //是否开启eslint
devServer: {
open: true, //是否自动弹出浏览器页面
host: "localhost",
port: '8080',
https: false, //是否使用https协议
hotOnly: false, //是否开启热更新
proxy: null, //这里就是需要配置的代理的地方啊。。。。
}
}
- 设置代理 (开发环境下)
我们在前后端分离开发时,不得不面对跨域问题,对于跨域,可以用两种办法进行处理.
安装 nginx,将后端和前端都代理带 nginx 上。
在 vue.config.js 文件中配置 proxy 属性,将 API 请求代理到 API 服务器上,设置 devServer.proxy
填写上面proxy的内容
proxy: {
'/': {
target: 'localhost:5000', //API服务器的地址
ws: true, //代理websockets
changeOrigin: true, // 虚拟的站点需要更管origin
//pathRewrite: { //重写路径 比如'/api/aaa/ccc'重写为'/aaa/ccc'
// '^/api': ''
//}
}
},
在真实请求处直接写baseUrl后面的部分即可。配置完成后要重启服务。
注意:target这里在mac和windows上写法不一样
windows:有的时候要用后面那种,还不明白原因
"target": "localhost:3000" 或 "target": "http://localhost:3000"
mac:
"target": "http://127.0.0.1:3000"
- 配置favcion图标
查看以下资料:
https://cli.vuejs.org/zh/config/#pwa
https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
vue.config.js
module.exports = {
outputDir: 'dist', //build输出目录
assetsDir: 'static', //静态资源目录(js, css, img)
lintOnSave: false, //是否开启eslint
pwa: {
iconPaths: {
favicon32: 'public/favicon.ico',
favicon16: 'public/favicon.ico',
appleTouchIcon: 'public/favicon.ico',
maskIcon: 'public/favicon.ico',
msTileImage: 'public/favicon.ico'
},
......
生产环境 api 请求接口 baseUrl 配置
只需要将 main.js 中 axios 作如下修改:
axios.defaults.timeout = 5001 // 请求超时
axios.defaults.baseURL = 'http://api.someurl.com/'
axios 请求地址的写法不变:
axios.post('/page_element/', {a: 1, b:2}).then((res) => {
console.log(res.data)
})
实际请求地址为:
http://api.someurl.com/page_element/