标签:div targe 如何 构建 webp push content 空字符串 端口
为什么需要请求代理呢?
按照我的理解就是因为现在开发都是前后端分离,所以开发都不是在同一台主机上的,所以当我们需要再开发环境中请求API,需要服务器的API代理到本地(原理是什么呢?是如何代理过来的呢?有待下一篇文章进行探讨,暂时不去理会了)。
这个问题实际上vue-cli3已经有解决方案了,就是通过vue.config.js这个配置文件中的devServer.proxy这个对象进行配置,其中devServer.proxy指向一个开发环境下的服务器API地址,如下配置:
module.export = {
devServer: {
proxy:"http://localhost:8080"
}
}
这段配置,将会告知无论请求任何资源,如果找不到资源文件,将代理到以下服务器路径
http://localhost:8080
我在开发我的开源项目的时候,遇到一个代理的需求,
我目前配置如下:
module.exports = {
baseUrl : "./",//配置打包时的相对路径
devServer: {
port: "8081",//代理端口
open: false,//项目启动时是否自动打开浏览器,我这里设置为false,不打开,true表示打开
proxy: {
‘/admin‘: {//代理api
target: "http://localhost:8080/account/admin",//服务器api地址
changeOrigin: true,//是否跨域
ws: true, // proxy websockets
pathRewrite: {//重写路径
"^/admin": ‘‘
}
}
}
}
}
如果你想学习一下全面的配置可以参考这个链接
如果你想要更多的代理控制行为,也可以使用一个path: options成对的对象。完整的选项可以查阅
proxycontext-config
顺带扯扯baseUrl的配置吧
baseUrl
部署应用包时的基本 URL。用法和 webpack 本身的 output.publicPath 一致,但是 Vue CLI 在一些其他地方也需要用到这个值,所以请始终使用 baseUrl 而不要直接修改 webpack 的 output.publicPath。
默认情况下,Vue CLI 会假设你的应用是被部署在一个域名的根路径上,
例如 https://www.my-app.com/。
如果应用被部署在一个子路径上,你就需要用这个选项指定这个子路径。
例如,如果你的应用被部署在 https://www.my-app.com/my-app/
,则设置 baseUrl 为 /my-app/。
这个值也可以被设置为空字符串 (’’) 或是相对路径 (’./’),这样所有的资源都会被链接为相对路径,这样打出来的包可以被部署在任意路径,也可以用在类似 Cordova hybrid 应用的文件系统中。
相对 baseUrl 的限制
相对路径的 baseUrl 有一些使用上的限制。在以下情况下,应当避免使用相对 baseUrl:
当使用基于 HTML5 history.pushState 的路由时;
当使用 pages 选项构建多页面应用时。
这个值在开发环境下同样生效。如果你想把开发服务器架设在根路径,你可以使用一个条件式的值:
module.exports = {
baseUrl: process.env.NODE_ENV === ‘production‘? "/account/admin/":"/"
}
标签:div targe 如何 构建 webp push content 空字符串 端口
原文地址:https://www.cnblogs.com/xiaoyuanbao/p/12979629.html