本文最后更新于 458 天前,其中的信息可能已经有所发展或是发生改变。
使用npm run build 之后,这段关于devServer 的proxy相关的东西,并不会被打包到静态面面中
module.exports = {
publicPath: './',
assetsDir: 'static',
productionSourceMap: false,
devServer: {
proxy: {
'/api':{
target:'http://127.0.0.1:5000',
changeOrigin:true,
pathRewrite:{
'/api':'api'
}
}
}
}
}
//首先,要知道devServer 只是一个webpack,vite插件 只能用于开发环境
- 使用 webpack-dev-server (下简称wds) 进行开发时,wds 启动了一个运行在 node 上的 web 服务器,此时开发环境访问对应的端口时 (以 8080 举例) ,浏览器返回的 vue 页面是 wds 处理后的结果。
- 跨域。简单来说,在使用 ajax 请求与当前页面不同来源的数据时,浏览器会拦截服务器发回的响应。在开发环境下,“当前来源”就是 http://127.0.0.1:8080,向任何其它地址或端口的请求都会被视作跨域,从而被浏览器拦截。
- devServer 的 proxy 是为了简化开发环境下的跨域请求配置。在上述情景中,注意被拦截的是发往“其它来源”的请求,而发往“当前来源”的不会被拦截,此处的“当前来源”则是作为开发服务器的 wds。wds 的思路就是基于此的,当发现符合在 devServer proxy 中配置好的请求格式时,将该请求拦截下来,由自己去请求服务器获取响应,然后把该响应返回给前端页面,即相当于一个传话筒。
- 编译打包后,前端页面成为了单独的静态资源,wds 被抽离出去了。但是资源要被访问,那必然还是需要有另一个 web 服务器来装载它,这个服务器常见的就是 nginx。所以,如果想要让线上的 vue 页面也能正常访问服务器,那么只需要配置 nginx,告诉它同样的事,即“当我访问某个 url 时,由你来做实际的请求,然后把结果告诉我”。
解决正式的生产环境建议使用nginx做转发
打包发布后需要在nginx配置文件中加入如下配置:
location /api{
rewrite ^.+api/?(.*)$ /$1 break; //可选参数,正则验证地址
include uwsgi_params; //可选参数,uwsgi是服务器和服务端应用程序的通信协议,规定了怎么把请求转发给应用程序和返回
proxy_pass http://www.test.com; // 接口地址
}
nginx主要目录

解决刷新404的问题
location /nft {
root html;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
这个 root html;对应的是图片上文件夹的html
index表示默认展开的是index.html index.htm;这两个文件的内容